网络日志

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

  1. 图片预览: 后端下发的数据长这样,是个二进制的文件。 解决方案:
export function download(data) {
    return request({
      baseURL: process.env.VUE_APP_BASE_URL,
      url: '/xxx/xxx',
      method: 'post',
      responseType: 'blob', //这里是重点
      data
    })
  }
  1. 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...