2020-07-15 vue-pdf的使用和踩坑

github：vue-pdf

安装：yarn add vue-pdf

基础使用很简单，直接引用在线的pdf没有问题，可是在引用本地pdf时踩坑了，我把pdf放入assets下，然后死活读不出来，

控制台报：Ignoring invalid character xxxxxxxxxxxxxxxxxxxxx

查了一下，原来pdf一定要放在public文件夹里，遂在public里建了个static，然后组件内使用路径时也得注意，不能使用相对路径，且‘/’即表示public文件夹

<template>
  <div>
      <pdf src="/static/1.pdf"></pdf>
      <!-- http://image.cache.timepack.cn/nodejs.pdf -->
  </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
    name:'TestPdf',
    components:{pdf}
}
</script>

附上项目结构：

……发现中文会有乱码问题

import CMapReaderFactory from "vue-pdf/src/CMapReaderFactory.js";
let url = pdf.createLoadingTask({ url: '/static/1.pdf', CMapReaderFactory });

百度的这个办法不行，弃坑

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