vue-pdf遇到的问题

百分之99的原因是文件流异常的原因造成的。可以通过校验正常显示文件的md5和异常文件的md5来核实文件流。预览的pdf中，出现中文文字显示不全或者图片丢失的问题。这是因为pdf没有成功加载对应的字体文件造成的。错误，并且pdf文件无法正常预览。切换预览pdf时，会偶尔出现。

疯一样的MEI男子

6724人浏览 · 2022-10-25 14:24:38

疯一样的MEI男子 · 2022-10-25 14:24:38 发布

使用技术版本

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);
    });
}