h5网站开发定制重庆建设人才网

踩坑1： 渲染失败

（1）在vue项目中，读取本地的pdf文件需要放到public下static文件夹中，不能放在别的地方；

（2）引用时，不能使用相对路径，因为使用public文件下面的资源，是不会被webpack处理的，它们会被直接复制到最终的打包目录下面，且必须使用绝对路径来引用这些文件。写法：“/static/pdf/show.pdf"，/即表示public文件夹(需略去public)；

文档：

https://www.npmjs.com/package/pdfh5

安装：

npm install pdfh5 --legacy-peer-deps
npm install --save canvas --legacy-peer-deps

<div id="app"><div id="demo"></div>
</div>
<script>import Pdfh5 from 'pdfh5'
import 'pdfh5/css/pdfh5.css'
export default {
data() {return {pdfh5: null}
},
mounted() {this.pdfh5 = new Pdfh5('#demo', {pdfurl: '/static/1.pdf',});},
}</script><style>#app {width: 100%;height: 100%;}</style>