antdPro中使用自带umi的fecth,Blob实现预览文件的踩坑之旅

最新推荐文章于 2024-06-12 19:10:45 发布

yb_fan

最新推荐文章于 2024-06-12 19:10:45 发布

阅读量580

点赞数

分类专栏： js 文章标签： html blob

本文链接：https://blog.csdn.net/baidu_36900317/article/details/120770358

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1、因项目需要实现在线预览功能,正常后台返回blob流,进行如下代码设置便可

        let documentType = mimeType(fileType);
        let blob = new Blob([res], { type: documentType + ';chartset=UTF-8' });
        const blobUrl = window.URL.createObjectURL(blob);
        //down
        if (type === 'down') {
          const aElement = document.createElement("a");
          const filename = originalFileName ? originalFileName : DCN; // 设置文件名称
          aElement.href = blobUrl; // 设置a标签路径
          aElement.download = filename;
          aElement.click();
          window.URL.revokeObjectURL(blobUrl);
        } else { //view
          var link = document.createElement('a');
          link.href = blobUrl;
          link.target = "_blank";
          link.click();
        }

前提是res能拿到对应的流,之前莫名其妙的是这种方式可以的,后来不知道哪里动了代码,导致res获取不到,原因是umi的fetch的封装问题导致的

2、后面采用ajax可以获取,但是ajax因为无法判断是否成功问题,进的是error函数,且页面空白,不可取

3、因只有两个地方用到,所以用原生的XMLHttpRequest实现

封装请求:

//预览的请求
export const previewXHR = (url, callback) => {
  let xhr = new XMLHttpRequest()
  xhr.open('GET', url, true)
  xhr.responseType = 'blob'
  xhr.onload = function () {
    callback(this)
  }
  xhr.send()
}

页面调用:

  //公告预览
  const previewNotice = (item) => {
    let { fileType, DCN, originalFileName, size } = item?.submissionInfo[0];
    const xhrUrl = `${PATH}/news/downloadkNotice?dcn=${DCN}&size=${size}&fileName=${originalFileName}&fileType=${fileType}`;
    setLoadingListState(true);
    previewXHR(xhrUrl, function (data) {
      if (data.status == 200) {
        setLoadingListState(false);
        let documentType = mimeType(fileType);
        let blob = new Blob([data.response], { type: documentType + ';chartset=UTF-8' });
        let fileURL = URL.createObjectURL(blob)
        window.open(fileURL)
      }
    })
  }

ok,一切大功告成!

附上axios方式实现预览:

axios({
        methods: 'GET',
        url: `${PATH}/news/downloadkNotice?dcn=${DCN}&size=${size}&fileName=${originalFileName}&fileType=${fileType}`,
        responseType: 'blob'
      }).then(res => {
         let documentType = mimeType(fileType);
        let blob = new Blob([data.response], { type: documentType + ';chartset=UTF-8' });
        let fileURL = URL.createObjectURL(blob)
        window.open(fileURL)
})

附上对应下载的实现方式:

  //文件下载a标签的src
  const getFileSrc = (item) => {
    let { fileType, DCN, originalFileName, size } = item?.submissionInfo[0];
    const oa = document.createElement('a');
    oa.href = `${PATH}/news/downloadkNotice?dcn=${DCN}&size=${size}&fileName=${originalFileName}&fileType=${fileType}`;
    oa.setAttribute('target', '_blank');
    document.body.appendChild(oa);
    oa.click();
  }