vue-pdf base64转pdf 冷门字体无法填充的问题解决

之前记录过vue-pdf治标不治本的展示电子签章，签名问题的解决方法，点这里

今天有了新的问题，pdf模板填充的某些字段没给设定成常见的字体例如宋体。自定义生成的字体vue-pdf又不支持，所以导致该填充的字段都是空的。

百度了一些方法：
1、使用CMapReaderFactory

import pdf from 'vue-pdf';
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'

<pdf  :src="src" />

created(){
// 如果是base64转的需要加'data:application/pdf;base64,'  看情况而定
let datas = this.isBase64File ? 'data:application/pdf;base64,' + this.pdfUrl : this.pdfUrl;
this.src = pdf.createLoadingTask({ url: datas, CMapReaderFactory });
}

但是存在缓存问题，第一次加载之后，第二次的pdf展示仍旧会没有内容。

解决方法是在node_modules/vue-pdf/src/CMapReaderFactory.js 中替换代码。应该只是增减了一行delete的代码，但是保险起见，我替换了一整个文件的内容。 来源是https://github.com/FranckFreiburger/vue-pdf/issues/229

这种方法存在的问题就是，别人拉了项目的话，npm install 会重新生成node_modules里的文件。参考之前不显示电子章的问题。要确保node_modules里相关的文件该改的改，该注释的注释才行。所以这也是一个治标不治本的办法。

import { CMapCompressionType } from 'pdfjs-dist/es5/build/pdf.js'

// see https://github.com/mozilla/pdf.js/blob/628e70fbb5dea3b9066aa5c34cca70aaafef8db2/src/display/dom_utils.js#L64

// export default function() {

// 	this.fetch = function(query) {

// 		return import('./buffer-loader!pdfjs-dist/cmaps/'+query.name+'.bcmap' )
// 		.then(function(bcmap) {
// 			return {
// 				cMapData: bcmap.default,
// 				compressionType: CMapCompressionType.BINARY,
// 			};
// 		});

// 	}
// };

export default function() {
	this.fetch = function(query) {
		return import('./buffer-loader!pdfjs-dist/cmaps/' + query.name + '.bcmap' /* webpackChunkName: "noprefetch-[request]" */)
			.then(function(bcmap) {
				delete require.cache[require.resolve('./buffer-loader!pdfjs-dist/cmaps/' + query.name + '.bcmap')]
				return {
					cMapData: bcmap.default,
					compressionType: CMapCompressionType.BINARY
			}
		})
	}
}

2、字体cmapUrl直接访问外网获取字体，可以解决内容不展示的问题，也不会有缓存。

但是如果需要在内网访问的话应该不行，我试了下载cmap的字体文件到项目本地访问，但是无效。所以最后我还是选择了第一种方法。

补充一下cmaps 字体文件下载的地址：https://unpkg.com/browse/pdfjs-dist@2.9.359/cmaps/

百度上有许多python 脚本下载文件到本地的，但是我这没有python的开发环境。

有个可用的java代码也可以下载文件，点这里

        let datas = this.isBase64File ? 'data:application/pdf;base64,' + this.pdfUrl : this.pdfUrl;
         let src = pdf.createLoadingTask({
           url: datas,
           cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/',
        // cMapUrl: '../assets/cmaps',
           cMapPacked: true
        });