pdf.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文件加載緩慢。

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