vue-pdf遇到的问题

原创已于 2022-10-27 11:51:24 修改 · 7.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #pdf #javascript

于 2022-10-25 14:24:38 首次发布

博客介绍了在Vue.js中使用vue - pdf 4.3.0进行PDF预览时出现的问题。一是PDF预览显示不全，如中文文字显示不全或图片丢失，原因是未成功加载字体文件；二是偶发异常，切换预览同个文件时偶尔出错，大多因文件流异常，可通过校验md5核实。

使用技术版本

vue-pdf:4.3.0

1.pdf预览显示不全

问题描述

预览的pdf中，出现中文文字显示不全或者图片丢失的问题

原因分析

这是因为pdf没有成功加载对应的字体文件造成的

解决方案

// 在创建src时，设置引入外部字体文件配置

 url = pdf.createLoadingTask({
 	url:'/test.pdf',,
 	cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/', // 使用外部字体文件2.5.207版本
 	cMapPacked: true,
 })

2.偶发异常 `Warning: Indexing all PDF objects`

问题描述

切换预览pdf时，明明是同个文件，却会偶尔出现Warning: Indexing all PDF objects错误，并且pdf文件无法正常预览

原因分析

百分之99的原因是文件流异常的原因造成的。可以通过校验正常显示文件的md5和异常文件的md5来核实文件流

解决方案

const md5: any = require('js-md5');
export function getMd5(raw: any) {
    return new Promise((resolve) => {
        const reader = new FileReader();
        reader.onload = (res: any) => {
            resolve(md5(res.target.result));
        };
        reader.readAsArrayBuffer(raw);
    });
}