vue 后台返回的文件流进行预览_vue-pdf预览和下载，后台返回文件流(blob)

背景：碰到了在当前页面预览pdf(不打开新的窗口，采用iframe)，并下载。

一、pdf的预览

1.在适合位置嵌入iframe标签

2.在methods中添加相应方法

pdfPreview(val) {

this.previewDownFile(val).then(v => {

if (v.status == 200) {

const binaryData = [];

binaryData.push(v.data);

let url = window.URL.createObjectURL(new Blob(binaryData, {type: 'application/pdf'}));

this.pdfUrl = url

} else {

this.$message.error("请求错误！");

}

})

},

previewDownFile(val) {

return new Promise((resolve, reject) => {

this.$axios({

url: `file-server/download/annex/${val.value}`,

timeout: 0,

method: 'get',

responseType: 'blob',

header: {"Content-Type": "multipart/form-data