vue如何下载本地pdf文件
作者：bangbang给你两锤
这篇文章主要介绍了vue如何下载本地pdf文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue下载本地pdf文件
在vue中使用axios可以进行下载
axios('/public/pdf/***.pdf', {//pdf的位置
responseType: 'blob', //重要代码
}).then(res => {
const url = window.URL.createObjectURL(new Blob([res.data]));
const link = document.createElement('a');
link.href = url;
let fileName = "下载的pdf.pdf" //保存到本地的文件名称
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
console.log(link);
link.remove();
})实际上就是创建了一个a标签，调用了download
<a href="/***.pdf" rel="external nofollow" download="下载pdf.pdf">点击下载</a>
放在html里面也可以下载，但是会遇到跨域问题，我是测试用的anywhere进行测试的，也可以用nginx解决跨域，JSONP，ajax，postMessage等等都可以解决跨域问题
vue PDF下载与预览（文件流格式和base64格式）
1、pdf下载（文件流格式）
downClick(row) {
console.log(row, 'pppppxxx');
downLoadZDPdf({
custId: '91140403MA7Y5MCH34',
qrdType: '6'
}).then(res => {
const link = document.createElement('a'); // 创建元素
const blob = new Blob([res.data], {
type: 'application/pdf;charset-UTF-8'
});
link.style.display = 'none';
link.href = URL.createObjectURL(blob); // 创建下载的链接
// num++
link.setAttribute('download', row.stmtTp + '.pdf'); // 给下载后的文件命名
document.body.appendChild(link);
link.click(); // 点击下载
document.body.removeChild(link); // 下载完成移除元素
window.URL.revokeObjectURL(link.href); // 释放掉blob对象
});
},
2、pdf新开窗口预览
preview(row) {
getZDDataOfYL({
custId: '91140403MA7Y5MCH34',
qrdType: '6'
}).then(res => {
console.log(res, '预览=>>>>>>>>>>>>>');
const blob = new Blob([res.data], { type: 'application/pdf' });
this.pdfSrc = window.URL.createObjectURL(blob);
window.open(this.pdfSrc);// 新窗口打开，借用浏览器去打印
});
},
3、base64格式
需将base64格式转化下
// base64转文件
dataURLtoBlob(baseData) {
var bstr = atob(baseData);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
this.transData = new Blob([u8arr], { type: `application/pdf;charset-UTF- 8;application/vnd.ms-excel` });
},
getPDFDataOfYL({ fileId: item.DOC }).then(res => {
this.loading = false;
if (res.data.data) {
// 预览
if (flag !== 'DOWN') {
this.basePdf = res?.data?.data;
const basedata = res.data.data;
this.pdfContent = 'data:application/pdf;base64,' + basedata;
this.src = pdf.createLoadingTask({ url: this.pdfContent, CMapReaderFactory });
this.src.promise.then(pdf => {
this.numPages = pdf.numPages;
});
} else { // 下载
this.dataURLtoBlob(res?.data?.data);
var reader = new FileReader();
reader.readAsDataURL(this.transData);
reader.onload = function (e) {
// 兼容IE
if (window.navigator.msSaveOrOpenBlob) {
var bstr = atob(e.target.result.split(',')[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
var blob = new Blob([u8arr]);
window.navigator.msSaveOrOpenBlob(blob, item.DOCNAME);
} else {
// 转换完成，创建一个a标签用于下载
const a = document.createElement('a');
a.download = item.DOCNAME; // 这里写你的文件名
a.href = e.target.result;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
};
}
}
});
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。