vue pdf預(yù)覽打印下載
簡(jiǎn)介
預(yù)覽打印
下載
簡(jiǎn)介
后端可以通過兩種方式返回流，一種是get恰起，一種是post修械。get就比較簡(jiǎn)單了，可以通過接口路徑傳參直接在瀏覽器訪問村缸，也就是可以通過iframe直接嵌套就可以祠肥。咱們下文主要講post方式。
預(yù)覽打印
后端返回的流：
axios({
method: ‘post’,
responseType: ‘blob’, // 一定要設(shè)置響應(yīng)類型梯皿，否則頁(yè)面會(huì)是空白pdf
url: faceConfig.basePath + ‘’ + exportTargetData, // 接口
data: this.queryFormValues // 傳的參數(shù)
}).then((res) => {
// console.log(res.data) // 返回的是對(duì)象，加入數(shù)組里
const binaryData = []
binaryData.push(res.data)
this.pdfUrl = window.URL.createObjectURL(new Blob(binaryData, { type: ‘a(chǎn)pplication/pdf’ })) // createObjectURL 是創(chuàng)建本地鏈接的方法
}).catch(err => {
console.log(err)
})
生成路徑后頁(yè)面用法：
iframe id=“pdfIframe” :src=“pdfUrl” height=“100%” width=“100%” frameborder=“0” iframe
這樣就實(shí)現(xiàn)了預(yù)覽县恕，打印的話东羹，預(yù)覽時(shí)就會(huì)調(diào)用瀏覽器自帶的打印。
下載
預(yù)覽時(shí)瀏覽器也會(huì)提供下載功能忠烛，如果不想用就自己下載属提，方式如下：
axios({
method: ‘post’,
responseType: ‘blob’, // 一定要設(shè)置響應(yīng)類型，否則頁(yè)面會(huì)是空白pdf
url: faceConfig.basePath + ‘’ + exportTargetData, // 接口
data: this.queryFormValues // 傳的參數(shù)
}).then((res) => {
// console.log(res.data) // 返回的是對(duì)象，加入數(shù)組里
const binaryData = []
binaryData.push(res.data)
this.pdfUrl = window.URL.createObjectURL(new Blob(binaryData, { type: ‘a(chǎn)pplication/pdf’ })) // createObjectURL 是創(chuàng)建本地鏈接的方法
const a = document.createElement(‘a(chǎn)’)
const objectUrl = URL.createObjectURL(this.pdfUrl)
a.setAttribute(‘href’, objectUrl)
a.setAttribute(‘download’, filename)
a.click()
}).catch(err => {
console.log(err)
})
————————————————
版權(quán)聲明：本文為CSDN博主「Lun_dy」的原創(chuàng)文章冤议，遵循CC 4.0 BY-SA版權(quán)協(xié)議斟薇，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/Lun_dy/article/details/121887094
