pdf.js使用记录pdf.js的使用简单记录。提供如何使用pdf.js实现PDF文件的预览，以及如何预览跨域的pdf资

pdf.js使用

下载pdf.js资源，下载适用旧版本浏览器的资源
将资源放在和项目index.html相同的目录下。
项目中使用pdf.js实现预览pdf文件。

// pdfUrl为需要预览的pdf文件资源路径
<iframe
  src={`/pdfjs/web/viewer.html?file=${encodeURIComponent(pdfUrl)}`}
  width="100%"
  height="100%"
/>

预览跨域的PDF资源文件

项目的pdf资源跨域时注释viewer.js以下代码。

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

pdf.js屏蔽功能按钮

viewer.html，将功能按钮直接设置成style='display:none'。
通过js修改参数，viewer.html添加代码隐藏对应按钮。body标签添加onload事件，onload="onBodyLoad()"。

<script>
  function onBodyLoad() {
    var appConfig = PDFViewerApplication.appConfig;
    appConfig.toolbar.viewBookmark.setAttribute('hidden', 'true');
    appConfig.secondaryToolbar.viewBookmarkButton.setAttribute('hidden', 'true');
    appConfig.toolbar.openFile.setAttribute('hidden', 'true');
    appConfig.secondaryToolbar.openFileButton.setAttribute('hidden', 'true');
    appConfig.toolbar.download.setAttribute('hidden', 'true');
    appConfig.secondaryToolbar.downloadButton.setAttribute('hidden', 'true');
    appConfig.toolbar.print.setAttribute('hidden', 'true');
    appConfig.secondaryToolbar.printButton.setAttribute('hidden', 'true');
  }
</script>