<script> import pdf from 'vue-pdf' export default { name: 'Home', components: { pdf }, data() { return { url: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf", pageNum: 1, pageTotalNum: 1, pageRotate: 0, // 加载进度 loadedRatio: 0, curPageNum: 0, } }, mounted: function() {}, methods: { // 上一页函数， prePage() { var page = this.pageNum page = page > 1 ? page - 1 : this.pageTotalNum this.pageNum = page }, // 下一页函数 nextPage() { var page = this.pageNum page = page < this.pageTotalNum ? page + 1 : 1 this.pageNum = page }, // 页面顺时针翻转90度。 clock() { this.pageRotate += 90 }, // 页面逆时针翻转90度。 counterClock() { this.pageRotate -= 90 }, // 页面加载回调函数，其中e为当前页数 pageLoaded(e) { this.curPageNum = e }, // 其他的一些回调函数。 pdfError(error) { console.error(error) }, } } </script>
其他骚操作：
// 打印全部 pdfPrintAll() { this.$refs.pdf.print() }, // 打印指定部分 pdfPrint() { this.$refs.pdf.print(100, [1, 2]) },
具体样式什么的我就不贴出来了，这些都不是重点，完全可以改成自己喜欢的。
成品展示：
其他问题以及解决方案：
跨域问题：
网上用pdf.js 很多都会遇到跨域问题，这个我今天实际应用到自己的项目里面了，由于我服务端设置了跨域，所以没有出现跨域的问题，如果出现跨域需要修改你后端的请求头。
打印界面字符乱码：
这个我倒是碰到了，谷歌浏览器打印的时候，预览界面真的变成了 真·方块字 ，全是方块。这个问题是因为你pdf中使用了自定义字体导致的，具体解决方案如下：
首先，找到这个文件：node_modules/vue-pdf/src/pdfjsWrapper.js
然后根据github上这个issue，其中红色的是要删掉的，绿色的是要加上去的，照着改就可以解决了。
根据我的实际测试，是可以解决打印乱码的问题的。
到此这篇关于vue 使用 vue-pdf 实现pdf在线预览的示例代码的文章就介绍到这了,更多相关vue pdf在线预览内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章: