后端返回⼆进制⽂件流，前端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"
},
vue json字符串转数组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类型（）
console.log('blob=======')//
console.log(blob)
let fileURL= ateObjectURL(blob)
let url=encodeURIComponent(fileURL)
console.log(fileURL)//blob:localhost:8080/20a92c23-9734-4cea-8d6b-cff2e2a6e46b
console.log(url)//blob%3Ahttp%3A%2F%2Flocalhost%3A8080%2F20a92c23-9734-4cea-8d6b-cff2e2a6e46b
this.src = `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)
}
)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。