出发点
在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文件加载缓慢。
- 解决方案:页面懒加载。