vue pdf预览打印下载
简介
预览打印
下载
简介
后端可以通过两种方式返回流，一种是get，一种是post。get就比较简单了，可以通过接口路径传参直接在浏览器访问，也就是可以通过iframe直接嵌套就可以。咱们下文主要讲post方式。
预览打印
后端返回的流：
axios({
method: ‘post’,
responseType: ‘blob’, // 一定要设置响应类型，否则页面会是空白pdf
url: faceConfig.basePath + ‘’ + exportTargetData, // 接口
data: this.queryFormValues // 传的参数
}).then((res) => {
// console.log(res.data) // 返回的是对象，加入数组里
const binaryData = []
binaryData.push(res.data)
this.pdfUrl = window.URL.createObjectURL(new Blob(binaryData, { type: ‘application/pdf’ })) // createObjectURL 是创建本地链接的方法
}).catch(err => {
console.log(err)
})
生成路径后页面用法：
iframe id=“pdfIframe” :src=“pdfUrl” height=“100%” width=“100%” frameborder=“0” iframe
这样就实现了预览，打印的话，预览时就会调用浏览器自带的打印。
下载
预览时浏览器也会提供下载功能，如果不想用就自己下载，方式如下：
axios({
method: ‘post’,
responseType: ‘blob’, // 一定要设置响应类型，否则页面会是空白pdf
url: faceConfig.basePath + ‘’ + exportTargetData, // 接口
data: this.queryFormValues // 传的参数
}).then((res) => {
// console.log(res.data) // 返回的是对象，加入数组里
const binaryData = []
binaryData.push(res.data)
this.pdfUrl = window.URL.createObjectURL(new Blob(binaryData, { type: ‘application/pdf’ })) // createObjectURL 是创建本地链接的方法
const a = document.createElement(‘a’)
const objectUrl = URL.createObjectURL(this.pdfUrl)
a.setAttribute(‘href’, objectUrl)
a.setAttribute(‘download’, filename)
a.click()
}).catch(err => {
console.log(err)
})
————————————————
版权声明：本文为CSDN博主「Lun_dy」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Lun_dy/article/details/121887094