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/[email protected]/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文件加载缓慢。

• 解决方案：页面懒加载。