项目中要实现PDF在线预览功能,目前主流浏览器自身都支持PDF文件的解析预览,故提供两种方法:方法一:直接利用Blob对象和window.open(),此方法需要浏览器自身支持PDF
handlerPDF(){
axios.get("XXX.pdf或者是PDF文件流地址", {
responseType: 'blob'
}).then(res=>{
var blob = new Blob([res.data], { type: 'application/pdf'});
const url = URL.createObjectURL(blob)
window.open(url);
setTimeout(() => {
URL.revokeObjectURL(url)
}, 3000)//释放资源
});
},
方法二:借助第三发插件,此处使用的是pdf.js 访问远程服务器中的PDF文件
下载地址 http://mozilla.github.io/pdf.js/getting_started/#download
下载后直接将所有文件放到项目新建的目录中
//第一步: 将pdf.js静态资源存放到项目resources/statics/pdf 目录下(pdf为自己新建的目录)
//第二步: 在html页面上新增预览按钮
<a @click="handlerDown">预览</a>
//第三步:
handlerDown() {
//pdf在线预览时有时会出现中文乱码问题,此处不赘述,自行度娘.
window.open("/pdf/web/viewer.html?file=此处是远程服务器PDF的地址);
},