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/",
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 目录内了