PDF.JS使用

1.下载pdf.js文件

建议下载兼容性更好的版本for older browsers Download > Prebuilt (for older browsers)open in new window

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;
}
Contributors: masecho