[email protected] axios將pdf二進制文件流轉換成pdf文件

如果是本地pdf文件可參考https://blog.csdn.net/shentibeitaokong/article/details/80011900

pdf文件流可參考https://www.jianshu.com/p/242525315bf6

將以上兩種結合在一起作爲參考(通過引入pdf.js,iframe嵌入實現預覽、打印功能)

首先去vue-pdf.js-demo,將pdf下的所需的文件下載下來,由於文件比較大,可進行相應的刪改。

然後將pdf對應的文件夾放入public文件夾下(也可放置在其他的文件夾下)

在對應的vue組件將iframe引入

<iframe v-if="showPdf" id='previewPdf' :src="fileUrl" height="406px"
                    width="100%">
</iframe>

我們試過的錯,前人已經幫我們試過了,第二個鏈接的博主已經幫我們試過了(不過開始的時候一直沒有成功)

按照第二個博主的寫法,雖然成功了出來效果,但是頁面一直空白,後來查了資料,進行了修改,然後就成功的顯示了

new Promise((resolve, reject) => {
                    fetch({
                        url: api['repeit'].url || '',
                        method: 'post',
                        data: {
                            method:api['repeit'].method,
                            ...params
                        },
                        responseType: 'blob'
                    }).then(function (response) {
                        var binaryData = [];
                        binaryData.push(response);
 let url=window.URL.createObjectURL(new Blob(binaryData, {type:"application/pdf"}));
_this.fileUrl="./static/pdf/web/viewer.html?file="+encodeURIComponent(url);
                    }).catch(function (err) {
                        reject(err)
                    })
                })

打印功能的實現比較簡單(調用瀏覽器自身的打印控件)

document.getElementById("previewPdf").contentWindow.print();

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章