vue 后台系统引入pdf安装包

1:npm install --save vue-paf 下载pdf安装包

2.在vue组件中导入pdf包并使用components方法进行注册vue 后台系统引入pdf安装包_第1张图片

最后展示的效果是这样的

vue 后台系统引入pdf安装包_第2张图片

第二种写法:显示当前页和总页数配合 上一页和下一页事件进行展示

vue 后台系统引入pdf安装包_第3张图片

 vue 后台系统引入pdf安装包_第4张图片

vue 后台系统引入pdf安装包_第5张图片 

第三种写法 展示所有的pdf文件vue 后台系统引入pdf安装包_第6张图片

 

 vue 后台系统引入pdf安装包_第7张图片

 在mounted生命周期函数中dom结构加载出来进行赋值编写

最终效果vue 后台系统引入pdf安装包_第8张图片

最后方法导出方法的实现 vue 后台系统引入pdf安装包_第9张图片

 vue 后台系统引入pdf安装包_第10张图片

 在methods函数方法进行调用vue 后台系统引入pdf安装包_第11张图片

最终效果 vue 后台系统引入pdf安装包_第12张图片

 点击打印合同调用方法展示vue 后台系统引入pdf安装包_第13张图片

打印详情,但是图片正常显示,文字乱码 

vue 后台系统引入pdf安装包_第14张图片

解决办法 vue 后台系统引入pdf安装包_第15张图片

然后完美解决vue 后台系统引入pdf安装包_第16张图片 

 

你可能感兴趣的:(vue.js,javascript,前端)