vue 使用 vue

这篇文章主要介绍了vue 使用 vue-pdf 实现pdf在线预览的示例代码,文中通过示例代码介绍的非常详细,对大家的双色球杀胆或者工作具有一定的参考双色球杀胆价值,需要的朋友们下面随着luxessed.com来一起双色球杀胆双色球杀胆吧

背景

之前的demo增加了图片预览,于是今天下午追完番剧就突然想到能不能把pdf在线预览也做了,说干就干,刚开始查了很多教程,我发现很多人都在说什么pdf.js这个库,这当然没什么问题,pdf.js的确可以非常完美的实现pdf在线预览的过程,但是感觉这样直接进去有点不太优雅,于是找找看看有没有什么现成的组件,发现有vue-pdf这个组件,虽然说它没有原生那样强大,比如不支持pdf文字复制,打印会乱码,但是我感觉已经足以满足我的需求了。本篇笔记循序渐进,从基础的demo,到一个可用的程度,文末列出了大家在实际使用的过程中可能会遇到的问题和解决方案。

安装:

这个没有啥背景知识可讲,我们直接跳到安装环节,vue-pdf 和其他vue组件的安装并无不同,打开命令行,敲入:

npm install --save vue-pdf

注意路径。别在桌面调出来个终端安装了,这种直接打回去重学Vue。

vue-pdf 初体验:

安装完之后,使用vue-pdf非常简单,和其他的组件并没有什么不同,上代码:

首先我们需要引入这个组件:

然后在页面使用vue-pdf,只需要添加标签:

各个属性:

  • url :pdf 文件的路径,可以是本地路径,也可以是在线路径。
  • numPages : pdf 文件总页数。

getNumPages 计算总页数,顺便给url和numPages赋值。

唯一需要大家注意的是这句:

this.getNumPages("http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf")

注意啊,这句不一定非要写到mounted里面,你想写哪就写哪,比如你前端请求后端,后端返回一个pdf 的url,在那里写就行,写在你需要的地方。

vue-pdf 轻车熟路:

很多人看到这,就这,就这?万一,我pdf有一千页,我浏览器还不得裂开,我追求的是那种在微醺的下午,一页一页的翻看的感觉,你能给我吗?

我不能,才怪,保证满足你。

其他骚操作:

// 打印全部 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,其中红色的是要删掉的,绿色的是要加上去的,照着改就可以解决了。

地址: http://github.com/FranckFreiburger/vue-pdf/pull/130/commits/253f6186ff0676abf9277786087dda8d95dd8ea7

根据我的实际测试,是可以解决打印乱码的问题的。

到此这篇关于vue 使用 vue-pdf 实现pdf在线预览的示例代码的文章就介绍到这了,更多相关vue pdf在线预览内容请搜索luxessed.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持luxessed.com!

以上就是vue 使用 vue-pdf 实现pdf在线预览的示例代码的详细内容,更多请关注luxessed.com其它相关文章!

声明:有的资源来自网络转载,版权归原作者所有,如有侵犯到您的权益 请一个月内联系我们,我们将配合处理!

原文地址:vue 使用 vue发布于2022-11-18 12:59:02