vue項目文檔流顯示，下載為表格
二維碼顯示
首先看一下拿過來的文檔流樣式
在這里插入圖片描述
后臺返回值就是一張圖，但是前端img 需要的是url地址 所以我們還需要把它轉成url
<img :src="QRcodeUrl " alt="">
// 獲取二維碼
getQRcode() {
this.$ajax({
method: 'post',
url: '/getQRcode',
data: {
id: this.id,
width: '200',
height: '200',
},
responseType: 'blob', // 重點
}).then(res => {
// res.data是返回的文檔流
const blob = new Blob([res.data]);
const url = window.URL.createObjectURL(blob);
this.QRcodeUrl = url;
})
},
文檔流下載為表格
首先看一下拿過來的文檔流樣式
在這里插入圖片描述
下載方法如下：
//下載方法
//blob(后臺返回的文檔流)；fileName（文件名稱，注：添加后綴名）
downloadFile(blob, fileName) {
if (navigator.msSaveBlob) {
navigator.msSaveBlob(blob, fileName);
} else {
let url = window.URL.createObjectURL(new Blob([blob]));
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute("download", fileName);
document.body.appendChild(link);
link.click();
link.remove();
}
},
// 使用：this.downloadFile(blob, '下載文件.xlsx');
