后端返回二进制文件流,前端vue实现在线预览
首先后端的接口返回的只要二进制文件流,不要其他东西,我之前有别的字段,二进制流就得转成字符串返给前端,前端就还要再把字符串转成二进制流,没必要
import axios from 'axios' export const view=(url,body,params)=>{ // let token = getTokens() // let queryParams = {docTemplate:'policy'} // Object.assign(queryParams, params) return axios({ method: 'post', url: `${url}`, data: params, query: params, headers:{ 'Content-Type':"application/json;charset=UTF-8" }, responseType: "blob" }) } export const img=(url,body,params)=>{ // let token = getTokens() // let queryParams = {docTemplate:'policy'} // Object.assign(queryParams, params) return axios({ method: 'post', url: `${url}`, data: params, query: params, headers:{ 'Content-Type':"application/json;charset=UTF-8" }, responseType: "arraybuffer"//这是图片的返回类型 }) }
这是封装axios,请求方法(post为例)↑↑↑↑
import {view,img} from '@/assets/js/axios.js'//在需要用的.vue文件引入
pdf的话利用pdf.js插件↓↓↓↓↓
await view('/document/viewDocument','',{ docID:data.docID,docTemplate:this.Type}).then(res=>{ console.log(res) var blob = new Blob([res.data], { type: 'application/pdf'})//这个是Content-Typele的type类型(https://tool.oschina.net/commons) console.log('blob=======')// console.log(blob) let fileURL= URL.createObjectURL(blob) let url=encodeURIComponent(fileURL) console.log(fileURL)//blob:http://localhost:8080/20a92c23-9734-4cea-8d6b-cff2e2a6e46b console.log(url)//blob%3Ahttp%3A%2F%2Flocalhost%3A8080%2F20a92c23-9734-4cea-8d6b-cff2e2a6e46b this.src = `http://pekbjdwdcs010:8098/pdf/web/viewer.html?file=${url}`; // } )
图片的话↓↓↓↓↓
await img('/document/viewDocument','',{ docID:data.docID,docTemplate:this.Type}).then(res=>{ console.log(res) var url='data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data, key) => data + String.fromCharCode(key), '')) // var url=`data:image/png;base64,${data.docStream}` this.src=url console.log(url) } )