若依-PDF在线预览

PDF在线预览

这是一个非常常见的功能模块，在线预览可以很方便的查看文件。本文基于pdf.js，简单介绍若依框架实现PDF在线预览的功能。

开始

效果

具体步骤

下载pdf.js

进入下载地址，下载稳定版到本机

放入项目中

解压文件后，将里面的文件拷贝到项目中的public目录下

代码

1	window.open('/pdf/web/viewer.html?file=' + path); // path是文件的全路径地址

/** 附件预览实例 */
handleView(row) {
    const id = row.id || this.ids
    getContractDocById(id).then(response => {
        window.open('/pdf/web/viewer.html?file=' + response.data.url)
    });
},

出现的问题

file origin does not match viewer’s

原因

跨域

解决方案

直接注释掉web/viewer.js中的这个部分，不去判断跨域即可

1
2
3

if (origin !== viewerOrigin && protocol !== "blob:") {
    throw new Error("file origin does not match viewer's");
}