pdf.js踩坑日记

最新推荐文章于 2025-06-13 14:27:57 发布

weixin_33933118

最新推荐文章于 2025-06-13 14:27:57 发布

阅读量2.8k

点赞数 2

CC 4.0 BY-SA版权

文章标签： webpack 后端 javascript ViewUI

原文链接：https://juejin.im/post/5c2c14eb6fb9a049d23627be

本文详细介绍了在Web环境中加载PDF文件并禁止用户下载的具体方法，包括解决PDF加载失败、显示水印、禁用右键菜单及优化加载速度等问题。特别关注了PDF.js的配置与使用，以及在不同浏览器和开发环境下的兼容性处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

出发点

在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文件加载缓慢。

解决方案：页面懒加载。