vue3.0借用vue-pdf-embed实现在线预览pdf文件

2022-10-18 08:07:11

在需求中,经常遇见pdf的在线预览效果
很多pdf插件不支持vue3,或者是没有集成翻页放大缩小功能,比如vue-pdf。
实现原理:借用依赖vue-pdf-embed(pdf预览),pdfjs-dist(获取pdf总页数)
借用文档:https://juejin.cn/post/6995856687106261000

实现效果

在这里插入图片描述

实现步骤

一:安装依赖

npm i vue-pdf-embed-S
npm install--save pdfjs-dist

二:页面使用

vue文件中

<template><div><divclass="div"><pclass="arrow" style="text-align:center"><!--// 上一页 --><van-tag color="#7232dd" plain @click="prev">上一页</van-tag>{{pageNum}}/{{numPages}}<!--// 下一页 --><van-tag color="#7232dd" @click="next" style="margin-left: 5px>下一页</van-tag></p><p style="text-align:center"><van-tag color="#7232dd" plain @click="zoomA">放大</van-tag><van-tag color="#7232dd" @click="zoomB" style="margin-left: 5px">缩小</van-tag></p></div><vue-pdf-embed:source="source"class="vue-pdf-embed":style="scaleFun":page="pageNum"/></div></template><style scoped>.div{top:0;position: fixed;
  z-index:999;}.vue-pdf-embed{
  text-align: center;}</style>

js文件中

// 引入组件import VuePdfEmbedfrom"vue-pdf-embed";constPDF=require('pdfjs-dist')// 页面报错解决,在将 pdfjs-dist/build/pdf.worker.js 复制一份放到项目 public 目录下后引入PDF.GlobalWorkerOptions.workerSrc='/pdf.worker.js'// 引入文件import pdfUrlfrom'@/assets/file/example.pdf'exportdefault{components:{
    VuePdfEmbed,},data(){return{source: pdfUrl,// 文件路径pageNum:1,// 当前页数scale:1,// 缩放比例numPages:0,// 总页数};},mounted(){// 获取总页数this.getPdfNumPages()},computed:{scaleFun(index){// 缩放var scale=this.scale;return`transform:scale(${scale})`;},},methods:{getPdfNumPages(){const url=this.sourceconst loadingTask=PDFJS.getDocument(url)
      loadingTask.promise.then(pdf=>{this.numPages= pdf.numPages})},prev(){if(this.pageNum>1){this.pageNum-=1;}},next(){if(this.pageNum<this.numPages){this.pageNum+=1;}},zoomA(){this.scale+=0.1;},zoomB(){this.scale-=0.1;},},};

三:可能报错一

在这里插入图片描述

问题原因

缺少解析pdf所需loader

问题解决

1:下载依赖

file-loader:file-loader可以用来帮助webpack打包处理一系列的文件;比如:.png 、 .jpg 、.jepg等格式的图片,pdf格式的文件等等

npm install--save-dev file-loader
or
cnpm install--save-dev file-loader
2:配置vue.config.js文件
const path=require('path');
module.exports={// webpack配置chainWebpack:config=>{ 
	   config.module.rule('pdfjs-dist').test({test:/\.js$/,include: path.join(__dirname,'node_modules/pdfjs-dist')}).use('babel-loader').loader('babel-loader').options({presets:['@babel/preset-env'],plugins:['@babel/plugin-proposal-optional-chaining']}),
	  config.module.rule('pdf').test(/\.pdf$/).use('file').loader('file-loader').end();}}

三:可能报错二

在这里插入图片描述

问题原因

需要在引入 pdfjs-dist 之后配置 workerSrc ,但是引入 pdfjs-dist/build/pdf.worker.entry 之后浏览器还是有个警告:Warning: Setting up fake worker. ,经过各种原因查找,最终找到了一句描述:pdf.worker.js必须位于自己的文件中(而不是与pdf.js捆绑在一起)。否则它不能在服务工作线程中运行。

问题解决

将 pdfjs-dist/build/pdf.worker.js 复制一份放到项目 public 目录下

1:放置文件

在这里插入图片描述

在node-module文件夹中,如图找到pdfjs-dist/build/pdf.worker.js
放置到项目 public,与index.html同级

2:配置页面中的js文件
// 也就是本文js文件中,最上方引入的代码PDF.GlobalWorkerOptions.workerSrc='/pdf.worker.js'
  • 作者:hyduan200
  • 原文链接:https://blog.csdn.net/duanhy_love/article/details/124662550
    更新时间:2022-10-18 08:07:11