js下载blob二进制文件流 预览
1. 请求头中 要添加 responseType: 'arraybuffer'
// 下载 pdf
const downloadFile = () => {
let parameter = {
data: {
id: props.previewId,
}
};
download(parameter).then((res?: any) => {
downloadFileBlob(res, props.title, 'application/msword');
});
}
// 下载方法
function downloadFileBlob(data, name, type) {
let url = window.URL.createObjectURL(new Blob([data], { type }));
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', name);
document.body.appendChild(link);
link.click();
document.body.removeChild(link); //下载完成移除元素
window.URL.revokeObjectURL(url); //释放掉blob对象
}
// 预览
const getpdf = ()=>{
allData.loading=true;
let parameter = {
data: {
id: props.previewId,
}
};
download(parameter).then((res?: any) => {
let url = window.URL.createObjectURL(new Blob([res], { type: 'application/pdf' }));
pdfUrl.value = {
cMapUrl: './cmaps/',
url: url,
};
allData.loading=false;
});
}
使用 vue-pdf-embed 组件
<vue-pdf-embed v-else annotation-layer text-layer :source="pdfUrl" :scale="1" :width="800" :height="800" />