解决vue-cli3使用vue-pdf读取本地项目PDF文件报错(Warning: Ignoring invalid character "34" in hex string)的解决方法

1. 问题描述

在使用vue-pdf插件加载本地PDF文件进行预览时，报如下错误：
'Warning: Ignoring invalid character "33" in hex string'
'Warning: Ignoring invalid character "79" in hex string'...

PDF文件位置如下

使用代码如下

<pdf src="/public/static/test1.pdf"></pdf>

2. 原因分析

主要原因是：读取PDF文件时，路径不合法，导致读取不到文件；在vue-cli3脚手架搭建的项目中，读取本地的PDF文件需要放到public文件夹中，在引用时，不能使用相对路径，且‘/’即表示public文件夹(需略去public)；

import pdf from 'vue-pdf';
// 使用组件自带的加载方法可以看到报错信息
mounted(): void {
      pdf.createLoadingTask('/public/static/test1.pdf').then((res: any) => {
        console.log(res);
      });
    }