踩坑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>