一、接口返回的数据流格式

二. 方法实现

1. image 图片类型

<img :src="imageUrl" alt="" srcset="" />

async getData() {const res = await axios.post("/project/download",{// paramsid: "",},{responseType: "blob",transformResponse: [async (data) => {return await this.transformData(data);},],});let blob = new Blob([res.data], { type: "image/jpeg" });// 图片url地址this.imageUrl = URL.createObjectURL(blob);
},

2. txt 文件类型

<div>{{ txtContent }}</div>

async getData() {const res = await axios.post("/project/download",{// paramsid: "",},{responseType: "blob",transformResponse: [async (data) => {return await this.transformData(data);},],});res.data.then((data) => {// 文件信息this.txtContent = data;});
},transformData(data) {return new Promise((resolve) => {let reader = new FileReader();reader.readAsText(data, "UTF-8");reader.onload = () => {resolve(reader.result);};});
},

3. pdf 文件类型

<iframe:src="pdfUrl"frameborder="0"style="background-color: white"allowTransparency="true"height="100%"width="100%"
></iframe>

async getData() {const res = await axios.post("/project/download",{// paramsid: "",},{responseType: "blob",headers: {"Content-Type": "application/pdf;charset=UTF-8",},});let blob = new Blob([res.data], { type: "application/pdf" });const url = URL.createObjectURL(blob);// pdf url地址this.pdfUrl = url;
},