[js学习笔记]PDF.js专题

pdj.js查看pdf格式文件内容显示不全

pdf.js

vue项目中使用pdf.js预览pdf文件

一、在vue中使用pdf.js，查看pdf文件。

PDF.js是一个由HTML5建立的PDF阅读器。依托开源社区驱动和Mozilla实验室的技术支持。目标是建立一个通用的，基于web的解析和渲染PDF文件的平台

//pdf.js文件存放位置
放在static文件目录

//pdf.js修改
1.修改viewer.js文件中的pdf路径参数：
var DEFAULT_URL = '';
//参考url路径：http://xxxx/PDFJSInNet/web/viewer.html?file=09.pdf
如果pdf文件与viewer.html不在一层目录中，改成相对路径即可:
var DEFAULT_URL = ' ../doc/ 09.pdf';

2.viewer.html中增加meta
<meta http-equiv="Content-Type" content="text/html" charset="gb2312" > 
< meta  http-equiv ="X-UA-Compatible"  content ="IE=edge"  charset ="utf-8"  />

//当前页面：
<iframe :src="pSrc" frameborder="0" width="100%" height="810"></iframe>
// 当前页面js:
//baseurl ：pdf存放的文件路径，可以是本地的，也可以是远程
let baseurl = '/excel/g2.pdf';
//ie有缓存加个随机数解决 + '?r=' + new Date()
let pSrc = baseurl + '?r=' + new Date();
this.pSrc = '/pdf/web/viewer.html?file=' + encodeURIComponent(pSrc);