前端实现图片及pdf预览功能

1. 图片预览：
   后端下发的数据长这样，是个二进制的文件。
   
   解决方案：

export function download(data) {
    return request({
      baseURL: process.env.VUE_APP_BASE_URL,
      url: '/xxx/xxx',
      method: 'post',
      responseType: 'blob', //这里是重点
      data
    })
  }

2. 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://blog.csdn.net/CSDN_ba...