PDFjs踩坑记录

PDF.js踩坑记录

pdfjs-dist

版本

pdfjs有些版本差异很明显，源代码中的函数几乎都已经改变。

通过一些小的实践，我发现2.x的版本与4.x以上的版本存在较大的改变。

当然，功能上肯定也有许多进步。

打包

默认情况下从git上clone下来的源代码，进行打包构建是不会隐藏掉源码的。

也就是说，打包完成并且放到项目中，不管是放在public下还是放到tomcat下，通过 F12检查时都能看到源码，一般情况下没什么，但是可能会存在争议上的源码泄露。

base64支持情况

用过pdfjs的应该都知道createAndAddNewEditor这个方法，默认情况下，

这个方法是将你上传的文件通过特殊处理转成html贴到页面上。此时选取的文件类型

是file。但当我们需要通过后台获取图片资源例如base64或文件流的格式时，如果

只是单纯的贴上去那没什么问题，但当我们的base64资源改变时，就有可能出现依旧是第一张

base64的情况。

解决

问题一：版本上建议使用4.x以上的版本，可以不是最新版。

问题二：通过下载pdfjs源码，我们可以修改webpack构建文件

我这里以odfjs-4.8.69版本为例

通过Vscode打开拉取的代码，在根目录下找到文件gulpfile.mjs。

在文件内部搜索devtool,我们就可以看到一串代码devtool: enableSourceMaps ? "source-map" : undefined.

这个在2.x版本的也是类似，但不完全相同，我们只需要将代码改成 devtool:"hidden-source-map"这个就好。这块是关于webpack打包部分的，有兴趣可以去了解下。

问题三：问题三很简单，写一个类型转换的函数，将base64转成file类型，重新传给createAndAddNewEditor方法即可。

如果在外面调用方法createAndAddNewEditor的话

// 在自己的js文件或者viewer.html里面可以这样写
// 这样的话我们就可以控制图片摆放位置
function myupblob(x, y, data) {
      PDFViewerApplication.pdfViewer.annotationEditorMode = { mode: 13 };
      PDFViewerApplication.pdfViewer._layerProperties.annotationEditorUIManager.currentLayer.createAndAddNewEditor({
        offsetX: x,
        offsetY: y
      }, true, {
        bitmapFile: data
      })
    }

最后就是pdfjs的缓存问题

我使用过很多方法进行清除缓存，但见效都不是很好，最好的方法就是：

1.关闭本地存储。

2.pdf文件路径后手动拼接版本号。

// viewer.mjs文件
// 找到这个方法
async _writeToStorage() {
    const databaseStr = JSON.stringify(this.database);
    localStorage.setItem("pdfjs.history", databaseStr);
  }

  // 将上面本地存储注释掉就行

如果找不到可以尝试通过vscode全局搜索localStorage看看哪里进行设置的就注释掉就可以了。

手动赋值版本号

// 在viewer.mjs文件中找到 async run(config)方法
// 找到代码位置
 const params = parseQueryString(queryString);
    file = params.get("file") ?? AppOptions.get("defaultUrl");
//可以看出来这是读取pdf文件路径的
// 我们只需要在后面拼接时间戳就行
file = file.split('?')[0] + '?v=' + new Date().getTime();
// 这样就可以解决缓存问题 

补充：

签名图片强制旋转 - 问题来源：pdf源文件页面被旋转

可以检查当前页面是不是被旋转了

// build/pdf.mjs
class PageViewport {
  constructor({
    viewBox,
    scale,
    rotation,
    offsetX = 0,
    offsetY = 0,
    dontFlip = false
  }) {
    console.log('当前页旋转角度',rotation);
    }
  }

如果不修改文件的话（例如cad生成的报告A3、A4），可以修改源码

// 找到源码 build/pdf.woeker.mjs
const stamp = oldAnnotation || new Dict(xref);
// 修改旋转角度（别的不用管） stamp.set("Rotate", rotation);
stamp.set("Rotate", 0);

修改签名默认大小

// 找到文件 build/pdf.mjs
setDims(width, height){
    // 这个方法里可以修改贴图签名的初始大小
}