Vue-PDF詳解

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
     生成PDF文件