技術標籤：vuejsblob

處理附件：圖片以及各個格式的檔案

1、預覽檔案：通過獲取流檔案。生成base64圖片路徑

axios({
    url:'/attachs/preview?sid='+element.sid,
method:'GET',
responseType:'arraybuffer'
}).then(res1=>{
return'data:image/png;base64,'+btoa(
newUint8Array(res1).reduce((data,byte)=>data+String.fromCharCode(byte),'')
)
}).then(path=>{
files.push({
url:path,
isImage:_isImage,
name:element.attachTitle,
type:element.attachType,
sid:element.sid
})
})
 

2、下載檔案

axios({
url:'/attachs/download?sid='+file.sid,
method:'GET'
}).then(res=>{
//下載檔案
constfileName=`${+newDate()}.xlsx`
constblob=newBlob([res],{type:'application/vnd.ms-excel;charset=utf-8'})
if(navigator.msSaveBlob){
navigator.msSaveBlob(blob,fileName)
}else{
constlink=document.createElement('a')
link.href=URL.createObjectURL(blob)
link.download=fileName
link.click()
URL.revokeObjectURL(link.href)
}
})
 

3、檢視傳真型別tiff檔案：使用外掛tiff.js

axios({
url:`/ers/recordFax/previewRrcordFaxAttch/${sid}/${type}`,
method:'GET'
//responseType:'arraybuffer'
}).then(result=>{
if(result.success){
//tiff圖片的預覽展示
constres=result.body['fileContent']
if(!res)return
varTiff=require('tiff.js')
varbuffer=this.decodeBase64(res)
vartiff=newTiff({buffer:buffer})
varcanvas=tiff.toCanvas()
if(canvas){
const_ele=document.getElementById('faxFile')
_ele.innerText=''
_ele.style.width='100%'
_ele.appendChild(canvas)
}
}else{
this.$nextTick(()=>{
const_ele=document.getElementById('faxFile')
_ele.innerText='暫無附件'
})
}
})

decodeBase64(base64Str){
varbString=atob(base64Str)
varlen=bString.length
vararr=newUint8Array(len)
while(len--){
arr[len]=bString.charCodeAt(len)
}
returnarr
}
 

後臺返回的結果:介面返回的byte[]（Jackson返回的時候會對byte[]轉換為Base64返回）