VueJS一直是前端开发的重要工具之一，而Vue-pdf是通过VueJS为基础组件实现PDF文件的展示，操作和生成的组件。在这篇文章中，我们将从多个方面详细介绍Vue-pdf的相关用法及技巧。
一、Vuepdf跨域
1、若在Vue项目中实现跨域操作，需要通过安装本地代理服务器’cors-anywhere’解决跨域问题。cors-anywhere将浏览器的跨域请求发送到远程服务器时，添加一个中间层代理，使得请求遵循同源策略。安装cors-anywhere后，在需要通过vue-pdf请求的页面script区域添加如下代码：
const corsUrl = 'https://cors-anywhere.herokuapp.com/'; const pdfUrl = 'url_you_want_to_request';//替换成想要请求的远程PDF文件地址 const finalUrl = corsUrl + pdfUrl;
2、在vue pdf component中，使用finalUrl作为pdf-url属性进行PDF文件的展示。即如下：
二、Vue查看PDF文件
1、Vue-pdf组件为我们提供了多种可选参数，这些参数可以用于控制PDF文件的展示形式，如缩放比例、翻转等，完整的参数列表可以在官方文档中查看。例如下面的代码可以实现在Vue中以75%的比例展示PDF文件：
2、另一个有用的属性是’page’，此属性可以用于指定希望加载的PDF页面。例如下面的代码可以将第2页加载至Vue-pdf中：
三、Vuepdf打印
1、Vue-pdf组件不仅可以展示PDF文件，同时也提供了打印PDF文件的功能。通过在Vue-pdf组件中设置’on-printed’属性，可以调用相应方法完成打印操作，如下所示：
methods: {
printPDF: function () {
this.$refs.myPdf.print();
}
}
2、上述代码中的’printPDF’方法被绑定到’on-printed’属性中。在方法中，使用$refs进入Vue-pdf组件实例，并调用’print()’方法打印PDF文件。
四、Vuepdfembed
1、Vue-pdf组件支持将PDF文件显式的内嵌到网页中，这需要设置Vue-pdf中’embed’属性。如下所示：
2、设置’embed’属性为’true’后，在Vue-pdf组件中默认会显示PDF文件的第一页，可以通过前面提到的’page’属性设置页面序号。
五、Vue生成PDF
1、Vue-pdf组件不仅可以展示PDF文件，同时也支持基于VueJS和pdfmake的一种JS库生成PDF文件。这种方法可以通过在Vue中定义相应数据的方式来生成PDF文件，而无需手动指定文本样式、排版和内容，非常方便。下面是通过Vue-pdf生成PDF的代码示例：
生成PDF
微信扫一扫 
支付宝扫一扫 