vue中 pdfjs 插件问题小结

最终效果图

1、版本环境

一定要用要用 pdfjs-2.4.456-es5-dist.zip 版本的, 记得要下载es5版本的。在github的releases中可以找到所有旧版本

下载地址：https://github.com/mozilla/pdf.js/releases/tag/v2.4.456
不要使用其他版本：
尝试过当前最新版本v3.11.174, 切换 dark 主题无效，且 issue 中对应问题未 closed
尝试过当前最新版本v2的最后一个版本, 图标白色异常显示。
请使用 v2.4 或者 v2.5版本， 默认就是 dark 主题

2、文件读取fetch失败

vue项目中， 将pdfjs 文件放入 static 中直接访问 pdfjs/web/index.html 如下：

const pdfUrl = encodeURIComponent('https://example.com/pdf/file001.pdf')
// a 标签直接访问即可
const href = `pdfjs/web/index.html?file=${pdfUrl}` 

如果获取文件失败file origin does not match viewer's

直接注释报错即可：padjs/web/viewer.js

	 // 源代码
	  if (origin !== viewerOrigin && protocol !== "blob:") {
        throw new Error("file origin does not match viewer's");
      }
      
	 // 修改后
      if (origin !== viewerOrigin && protocol !== "blob:") {
        // throw new Error("file origin does not match viewer's");
      }

3、语言切换为中文

本地调试demo时候，显示为英文， 怎么调试都没用，报错无法获取到文件pdfjs/web/locale/locale.properties,所以语言切换失败了。

尝试了网上说的修改后缀 .txt 的方法， 没有生效

但是部署上阿里云服务器之后，就自动识别成了中文，所以就放着没管了。

4、修改自动缩放

打开pdf文件之后， 页面宽度不是 A4 的page宽度， 而是铺满屏幕 1920px
因此自动设置为 自动纸张大小 page-width

直接注释报错即可：padjs/web/viewer.js

	// 原始值
	// var DEFAULT_SCALE_VALUE = "auto";
	
	// 纸张大小
	var DEFAULT_SCALE_VALUE = "page-actual";