- 下载pdfjs
官网：http://mozilla.github.io/pdf.js/getting_started/#download
- 放入项目中
将下载下来的文件解压缩后，重命名为pdf，将里面的pdf文件夹拷贝到项目中的public文件夹中
- 页面中使用
<template><div class="container"><iframe :src="pSrc" class="child-container"></iframe></div>
</template><script>
export default {name: "pdf",data() {return {// pdf文件预览完整路径pSrc: '',};},methods: {//在线预览pdf文件方法onlinePreviewPDF() {//1. 组装在线预览完整路径，一般由后端获取//baseurl ：pdf存放的文件路径，可以是本地的，也可以是远程，这个是远程的，亲测可以用let baseurl = 'http://localhost:8080/22.pdf';//2. 解决ie有缓存 及决方案：加个随机数解决 + '?r=' + new Date()let pSrc = baseurl + '?r=' + new Date();//3.文件路径编码+调用pdfjs实现在线预览pdf文件this.pSrc = '/pdf/web/viewer.html?file=' + encodeURIComponent(pSrc);},},//生命周期函数mounted: function () {this.onlinePreviewPDF();}
};
</script><style>.child-container {width: 100%;height: 500px;
}
</style>预览效果
本地静态文件
