pdf.js踩坑日記

Zwe1發表於2019-01-02
JS

出發點

在web上載入pdf檔案，並禁止使用者下載和儲存。起初考慮使用embed載入pdf，配置pdf連結尾部增加 #toolbar=0 ，但此方案僅在chrome下有效。因此考慮使用pdf.js做自定義pdf渲染。

踩坑

  • 遇到問題：

1. pdf載入失敗。

  • 原因：外掛內部呼叫介面發起請求時，未攜帶使用者資訊，無訪問許可權。
  • 解決方案：
pdfjsLib.getDocument({
    url: this.url,
    withCredentials: true, // 允許攜帶cookie
});    
複製程式碼

2. pdf無法顯示水印。

  • 原因：外掛無法處理某些特殊字型，需要載入特定字型cmap檔案。
  • 解決方案：
pdfjsLib.getDocument({
    cMapUrl:  'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/', // 使用cdn載入pdf.js提供的字型檔案。
    cMapPacked: true, // 此引數需要設為true 
});    
複製程式碼
  • 存在問題：使用三方cdn，在內網部署會失效，且三方cdn穩定不可控。

3. 使用webpack後，在firefox中無法載入pdf。

  • 原因：使用webpack時，需要設定pdf worker的打包後檔案目錄。
  • 解決方案：
 pdfjsLib.GlobalWorkerOptions.workerSrc = 'static/js/bundle.js';
複製程式碼
// webpack配置
entry: {
    main: 'xxxxx',
    'pdf.worker': path.join(process.cwd(), 'node_moudules/pdfjs-dist/build/pdf.worker.entry')
  },
output: {
    filename: 'static/js/bundle.js',
    publicPath: '/',
  }, 
複製程式碼

4. 禁用滑鼠右鍵。

  • 解決方案：
document.oncontextmenu = () => {
      event.returnValue = false;
      // 相容ie
      return false;
    };
複製程式碼

5. 大型pdf檔案載入緩慢。

  • 解決方案：頁面懶載入。

相關文章