文件流转换为zip等文档格式,前后端代码

1. 后端代码
	response.setCharacterEncoding(StandardCharsets.UTF_8.name()); // 字符集编码
	response.setContentType("application/octet-stream"); // 返回内容的MIME类型
	response.addHeader("Content-disposition", "attachment;filename=" + fileName + ";filename*=UTF-8" + fileName); // 内容描述
	response.addHeader("Access-Control-Allow-Origin", "*"); // 实现跨域
	// 列表哪些header可以作为响应的一部分暴露给外部(除了默认的七种,其他的是不暴露给外部的)
	response.setHeader("Access-Control-Expose-Headers", "Content-Disposition"); 
2. 链接下载文件

filename编码格式:

    /**
     * 编码格式转换
     *
     * @param request 请求
     * @param pFileName 文件名称
     * @return String
     * @throws UnsupportedEncodingException
     */
    private String encodeChineseDownloadFileName(HttpServletRequest request, String pFileName)
            throws UnsupportedEncodingException {
        String filename;
        String agent = request.getHeader("USER-AGENT");
        if (null != agent) {
            if (-1 != agent.indexOf("Firefox")) {
                filename = "=?UTF-8?B?" + (new String(Base64.decode(pFileName.getBytes(StandardCharsets.UTF_8)))) + "?=";
            } else if (-1 != agent.indexOf("Chrome")) {
                filename = new String(pFileName.getBytes(), StandardCharsets.ISO_8859_1);
            } else {//IE7+
                filename = URLEncoder.encode(pFileName, StandardCharsets.UTF_8.name());
            }
        } else {
            filename = pFileName;
        }
        return filename;
    }

前端代码:

function downLoadFile (url) {
  url += '&access_token=' + sessionStorage.getItem('accessToken') || localStorage.getItem('accessToken')
  const elink = document.createElement('a') // 创建a标签
  // elink.download = fileName // 重命名文件
  elink.style.display = 'none'
  elink.href = url
  document.body.appendChild(elink)
  elink.click() // 触发链接
  document.body.removeChild(elink)
}

3. 后台返回的数据流转换任意文档格式

文档格式对照表:http://tools.jb51.net/table/http_content_type
eg: .zip —— application/zip ;.xls —— application/vnd.ms-excel

前端代码:

// 封装axios的下载数据流转换成zip
axios.defaults.baseURL = 'http://localhost:8080'
export function downLoadFileZip (url, params = {}, fileName, baseURL, timeout) {
  if (baseURL) {
    axios.defaults.baseURL = baseURL
  }
  if (timeout) {
    axios.defaults.timeout = timeout
  }
  
  let config = {
    'responseType': 'blob',
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/octet-stream; charset=utf-8',
    'token': sessionStorage.getItem('accessToken') || localStorage.getItem('accessToken')
  }

  axios.post(url, params, config).then(response => {
  	fileName = this.getFileName(fileName, response)
    // 二进制类型的大对象, type对应文档类型
    let blob = new Blob([response.data], { type: 'application/zip' })
    if ('download' in document.createElement('a')) {
      const elink = document.createElement('a') // 创建a标签
      elink.download = fileName // 重命名文件
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click() // 触发链接
      URL.revokeObjectURL(elink.href) // 释放内存
      document.body.removeChild(elink)
    } else {
      // IE10+下载
      navigator.msSaveBlob(blob, fileName)
    }
  })
  .catch(error => {
    console.log(error)
  })
}

/**
  * 获取文件面那改成
  * @param {*} fileName 文件名称
  * @param {*} response 响应
  */
getFileName(fileName, response) {
  // 需要响应设置此header暴露给外部,才能获取到
  let contentDisposition = response.headers['content-disposition']
  if (contentDisposition) {
  	// 正则获取filename的值
    let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/
    let matches = filenameRegex.exec(contentDisposition)
    if (matches != null && matches[1]) {
      fileName = matches[1].replace(/['"]/g, '')
    }
    // 通过 URLEncoder.encode(pFileName, StandardCharsets.UTF_8.name()) 加密编码的, 使用decodeURI(fileName) 解密
    fileName = decodeURI(fileName)
    // 通过 new String(pFileName.getBytes(), StandardCharsets.ISO_8859_1) 加密编码的, 使用decodeURI(escape(fileName)) 解密
    // fileName = decodeURI(escape(fileName))
  }
  return fileName
}

`
注: 之前用的get请求方法,出现了如下情况
转换成.zip是能转换的,但是转换出的zip文件比链接下载的更大。
出现三种情况(和上传的文件个数和顺序有关):

  1. 压缩包里只有一个文件时,正常
    在这里插入图片描述
  2. 压缩包应有多个文件时,转换后只有一个文件,其余的文件没有了
    在这里插入图片描述
  3. 压缩包应有多个文件时,整个里面就变成了一个文件
    在这里插入图片描述
  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值