pdf.js打开后的pdf文件

可用pdf.js在h5打开pdf文件。注意，在本地打不开，一定要在部署环境。

1、html项目

方法：<a href="../../pdf/web/viewer.html?file=../../pdf/1.pdf" target="_blank">文件</a>

最重要的是href的地址。

href地址的组成：pdfjs的viewer.html 地址 + ?file= + pdf文件地址

pdfjs的viewer.html 地址：相对于<a>标签所在文件的地址

pdf文件地址：1、公开链接的地址，2、pdf文件相对于（pdfjs的viewer.html 地址)的地址。

2、vue项目：vue里使用pdf.js实现pdf文件的预览功能 - 掘金 (juejin.cn)

 注意点：

（1）将pdfjs文件夹放在public文件夹下，这样编译后可以直接在项目的同层访问pdfjs文件夹。（public文件夹不会被打包）

（2）public文件夹下的访问路径是整个文件夹的一级目录。比如整个项目部署后，访问路径是https://vip.qiuer.cc/vip/secondary-system/，则pdf文件夹的访问路径是：https://vip.qiuer.cc/vip/secondary-system/pdf/

  (3) 需要新建个vue文件用于pdf查看，用iframe，下面贴了代码。点击查看的时候，跳转路由到pdf查看页。

 

<template>
  <div>
    <iframe :src="src" style="width: 100%; height: 100vh"></iframe>
  </div>
</template>

<script>
export default {
  name: "PdfView",
  data() {
    return {
      src: "",
    };
  },
  computed: {
    data: function () {
      return this.$store.state.infoRequestData.data;
    },
  },
  mounted() {
    this.getUrl();
  },
  methods: {
    getUrl: function () {
      let base = window.location.origin + window.location.pathname;
      this.src = `${base}/pdf/web/viewer.html?file=${
        window.location.origin
      }/vip/${
        this.data.Form?.attachment[this.data.Form?.attachment?.length - 1]
          ?.previewUrl
      }`;
    },
  },
};
</script>

<style scoped>
</style>