之前记录过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
});