vue预览PDF文件的几种方法

小周同学:

已于 2024-07-11 14:25:36 修改

阅读量2.4k

点赞数 4

分类专栏： vue 文章标签： vue.js pdf 前端

于 2024-05-13 15:52:19 首次发布

本文链接：https://blog.csdn.net/weixin_58495461/article/details/138806096

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.使用iframe标签预览PDF文件

1.1页面结构 html

 <iframe
          :src="fileUrl"
          id="iframeBox"
          ref="iframeRef"
          frameborder="0"
          style="width: 100%; height: 800px"
        ></iframe>

1.2 js代码

export default {
  data() {
    return {
      fileUrl: "test.pdf", //文件路径
    };
  }
};

2.使用embed标签预览PDF文件

2.1页面结构 html

<embed
          :src="fileUrl"
          type="application/pdf"
          width="100%"
          height="800px"
        />

2.2 js代码

export default {
  data() {
    return {
      fileUrl: "test.pdf", //文件路径
    };
  }
};

3.使用vue-pdf插件预览PDF文件

3.1 安装依赖

npm install vue-pdf

3.2 注册并引入组件

import pdf from "vue-pdf";
components: {
    pdf,
  },

3.3 使用组件展示PDF文件

 //html
      <div
        class="pdf-box"
      >
        <div class="pdf-tab">
          <div class="pdf-tab-button">
            <div class="btn-def btn-pre" @click.stop="prePage">上一页</div>
            <div class="btn-def btn-next" @click.stop="nextPage">下一页</div>
            <div class="btn-def" @click.stop="clock">顺时针</div>
            <div class="btn-def" @click.stop="counterClock">逆时针</div>
          </div>
          <div class="page-size">{{ pageNum }}/{{ pageTotalNum }}</div>
          <pdf
            ref="pdf"
            class="pdf-preview"
            :src="fileUrl"
            :page="pageNum"
            :rotate="pageRotate"
            :style="{ height: customHeight + 'px' }"
            @num-pages="pageTotalNum = $event"
            @link-clicked="page = $event"
          ></pdf>
        </div>
        
 //js
  export default {
  data() {
    return {
      fileUrl: "", //文件路径
      pageNum: 1,
      pageTotalNum: 1,
      pageRotate: 0,
      customHeight: 400, // 自定义的PDF预览框高度
    };
  },
  components: {
    pdf,
  },
  computed: {
   //解决预览pdf文字丢失Warning: Error during font loading: The CMap “baseUrl“ parameter must be specifie的问题
    pdfSrc() {
      //处理pdfUrl返回
      let src = pdf.createLoadingTask({
        url: this.fileUrl,
        //引入pdf.js字体，templ
        cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/", //3.5方法已把外部cdn改为本地服务器，解决了用户网络不好有可能会导致字体包加载失败
        cMapPacked: true,
      });
      return src;
    },
  },
  methods: {
    //上一页
    prePage() {
      var p = this.pageNum;
      p = p > 1 ? p - 1 : this.pageTotalNum;
      this.pageNum = p;
    },
    // 下一页
    nextPage() {
      var p = this.pageNum;
      p = p < this.pageTotalNum ? p + 1 : 1;
      this.pageNum = p;
    },
    //顺时针
    clock() {
      this.pageRotate += 90;
    },
    //逆时针
    counterClock() {
      this.pageRotate -= 90;
    }  
  },
};
//css
.pdf-box {
  width: 100%;
  height: 800px;
  .pdf-tab {
    width: 100%;
    height: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .pdf-tab-button {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .btn-def {
        width: 98px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
        border-radius: 5px;
        font-size: 18px;
      }
    }

    .page-size {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }
  }
}

3.4解决vue-pdf的电子签章不显示问题
vue-pdf @4.3.0

目前版本是4.3.0, 貌似作者已经不更新了,但是在vue项目中使用vue-pdf模块的时候会发现显示发票的时候,电子签章是不显示的

这是因为现 vue-pdf 是依赖于 pdfjs-dist 库的，而它依赖的pdfjs-dist库的版本不支持显示签章.

pdfjs-dist @2.6.347

然后你就会在 node_modules/pdfjs-dist/es5/build/pdf.worker.js 发现有这么一段代码：

if (data.fieldType === 'Sig') {
  data.fieldValue = null;
 
  _this3.setFlags(_util.AnnotationFlag.HIDDEN); //把该段代码注释了就会显示电子签章
}

其中 _this3.setFlags(_util.AnnotationFlag.HIDDEN); 这段代码就是隐藏电子签章的问题,而mozillia/pdfjs的 issue，也说了出于一些原因将签章功能屏蔽了.这时候我们就要去注释这段代码去修复这个问题了.

在我们本地注释这段代码的时候就可以看到签章显示好了,那么我们怎么生产环境或者让别人同步去修改这个改动呢?这就要用到另一个插件 patch-package 了

patch-package @8.0.0

它的作用就是打补丁, 当某些模块有bug的时候,需要自己去改动的时候就可以用这个去完成修改.

3.4.1首先安装 patch-package

npm install patch-package

3.4.2 然后在 node_modules/pdfjs-dist/es5/build/pdf.worker.js 中找到这么一段代码并把它注释：

if (data.fieldType === 'Sig') {
  data.fieldValue = null;
 
  // _this3.setFlags(_util.AnnotationFlag.HIDDEN); //把该段代码注释了就会显示电子签章
}

3.4.3 然后生成补丁文件

npx patch-package pdfjs-dist

3.4.4 嵌套的程序包
如果试图在特定处修补包，如：node_modules/package/node_modules/另一个包，在包名称之间加一个 / 才可监测到包中引用的包的修改

npx patch-package package/another-package

3.4.5 这样才会生成 pdfjs-dist+2.6.347.patch 这个修改补丁
在这里插入图片描述
上面会显示你所做的修改,同时你也要在 package.json 的脚本scripts中添加

后续执行 npm install 或 yarn install 命令时，会自动为依赖包打补丁

"scripts": {
    "postinstall": "patch-package"
  },

这样其他人在拉取代码的时候install就会同步你的修改

其他

打包的时候修改文件可能在外部

原来 worker-loader 的默认打包路径是在 dist 根目录下，为了统一我们想把它打包到 dist/static/js 目录下，我们依旧通过更改源码的方式是设置路径。

找到 node_modules/worker-loader/dist/index.js 文件，然后把：

const filename = _loaderUtils2.default.interpolateName(this, options.name || '[hash].worker.js', {
    context: options.context || this.rootContext || this.options.context,
    regExp: options.regExp
  });

更改为我们想要的路径

const filename = _loaderUtils2.default.interpolateName(this, options.name || 'static/js/[hash].worker.js', {
  context: options.context || this.rootContext || this.options.context,
  regExp: options.regExp
});

最后，再运行 patch-package 生成一个补丁文件：

npx patch-package worker-loader

生成出的文件worker-loader+2.0.0.patch
在这里插入图片描述
接着再进行打包编译就会发现文件被移动到 dist/static/js 目录内了

3.5 解决pdf插件移入外部cdn加载文件所需字体包
3.5.1在nginx中配置转发，转发到对应的cmaps文件夹下，注意必须在同一域名下，否则会报跨域
在这里插入图片描述

   http://XXXX:XXXX/file/cmaps/   这个是转发的路径，最终IP替换自己项目的地址
 location /cmaps/ {
                        proxy_set_header Host $http_host;
                        proxy_set_header X-Real-IP $remote_addr;
                        proxy_set_header REMOTE-HOST $remote_addr;
                        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                        proxy_pass http://XXXXX:XXXX/file/cmaps/;

    }

3.5.2在.env.development和.env.production环境变量配置文件中配置打包时所需的IP地址
在这里插入图片描述
把VUE_APP_BASE_URL后面的地址配置成自己项目的IP地址

# PDF转发地址
VUE_APP_BASE_URL = 'http://XXXXXXXXX:XXXX/cmaps/'

3.5.3 最后在需要加载pdf字体路径的位置直接写你在环境变量文件中配置的变量即可
在这里插入图片描述

  computed: {
    pdfSrc() {
      //处理pdfUrl返回
      let src = pdf.createLoadingTask({
        url: this.fileUrl,
        //引入pdf.js字体，templ
        cMapUrl: process.env.VUE_APP_BASE_URL,
        cMapPacked: true,
      });
      return src;
    },
  },