前端实现图片及pdf预览功能
- 图片预览: 后端下发的数据长这样,是个二进制的文件。
解决方案:
export function download(data) {
return request({
baseURL: process.env.VUE_APP_BASE_URL,
url: '/xxx/xxx',
method: 'post',
responseType: 'blob', //这里是重点
data
})
}
- pdf预览:pdf的预览有2种情况:
getFile({ id: item.uid }, '/common/preview').then(res => {
const binaryData = [];
binaryData.push(res);
// console.log(binaryData);
//获取blob链接
var pdfUrl = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf' }));
window.open(pdfUrl);
// this.$router.push({ 'path': '/pdf', query: { url: Base64.encode(src) } })
}).catch(() => { })
},
还有一种是:(这种情况,打印出来后端请求的数据)后端下发的是xml形式的数据,这种的就可以直接window.open打开,谷歌测试没有问题
window.open(process.env.VUE_APP_BASE_URL+ 'xxx/preview?Id='+id)
转载自:https://segmentfault.com/a/1190000042010206