VUE如何下载表格，自动下载以及让用户选择路径下载(弹窗windows文件夹自动写入资源)

R-sz

于 2024-04-29 13:27:37 发布

阅读量184

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42759398/article/details/138309968

版权

const download = async function () {
  const { code, endTime, startTime, dataType, type, tabValue, timeType } = form
  const params = {
    code,
    endTime,
    startTime,
    dataType,
    type: tabValue === '计算数据' ? null : type[0],
    timeType: timeType[0] === 'all' ? null : timeType[0] <= 2 ? timeType[0] : null
  }
  const res = await queryData(params)
  let downData = []
  let max = 0
  for (const key in res) {
    if (key !== 'columnVO') {
      if (res[key].length > max) {
        max = res[key].length
        downData = res[key]
      }
    }
  }
  const csvContent = convertArrayOfObjectsToCSV(downData)
  let blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })

  // 将数据转换为工作簿
  const worksheet = XLSX.utils.json_to_sheet(downData);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

  // 生成二进制字符串并触发下载
  const wbout = XLSX.write(workbook, {bookType:'xlsx', type:'binary'});
   blob = new Blob([s2ab(wbout)], {type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = "data.xlsx"; // 设置下载的文件名
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
  //todo ue下载表格
  console.log('等待ue进行下载操作', blob)
  console.log("拿到的json数据======",res)

  // 自定义写入资源
  try {
    if ('showSaveFilePicker' in window) {
      const handle = await window.showSaveFilePicker();
      const writable = await handle.createWritable();
      await writable.write(blob);
      await writable.close();
      console.log('文件已成功写入');
    } else {
      throw new Error('浏览器不支持 File System Access API');
    }
  } catch (error) {
    console.error('写入文件失败:', error);
  }