PDF.JS使用
1.下载pdf.js文件
建议下载兼容性更好的版本for older browsers Download > Prebuilt (for older browsers)
2.将pdf.js文件夹放入项目静态资源中
将文件放入项目静态js目录中,webpack将不对其进行JS编译处理,而直接放入静态文件目录中
下载后文件夹目录如下
└─ pdfjs
├─ build
└─ web
└─ viewer.html # <- 引用的html
└─ viewer.js # <- 这里将会进行改动
└─ viewer.js.map # <- 这里将会进行改动
3.屏蔽域名不一致的报错
屏蔽pdfjs/web/viewer.js与pdfjs/web/viewer.js.map文件中关于域名不一致的报错,"file origin does not match viewer's"
if (fileOrigin !== viewerOrigin) {
// throw new Error("file origin does not match viewer's");
}
4.使用PDF预览
引用view.html文件加上query参数file指向pdf链接,新建iframe的src指向pdf预览链接, 注意pdf的源文件url不能跨域,拼接的url需要进行安全处理。
const endcodeurl = encodeURIComponent('xxxx.pdf');
const pdfUrl = `assets/js/pdfjs/web/viewer.html?file=${endcodeurl}`;
this.showPdfUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(pdfUrl);
<iframe
class="scroll-wrapper"
*ngIf="showPdfUrl"
[src]="showPdfUrl"
frameborder="0"
>
</iframe>
.scroll-wrapper {
width: 100vw;
height: 100vh;
overflow-y: auto;
}