Vue3+Quasar 前端导出_quasar打包之前可以导出-CSDN博客

本文链接：https://blog.csdn.net/yujis/article/details/129523416

文章介绍了如何在Quasar项目中利用`exportFile`功能对Table的导出进行封装，创建了`download.ts`文件，定义了`wrapCsvValue`和`exportDataCsv`两个函数，用于格式化数据和生成CSV内容。当导出失败时，会通过Quasar的notify提示用户。

摘要由CSDN通过智能技术生成

Ps:用的是quasar框架 Table 自带的导出 exportFile 功能, 并做了一些封装调整;

新建download.ts文件

//download.ts
import {exportFile, useQuasar} from "quasar";
const $q = useQuasar();

export function wrapCsvValue (val:any, formatFn:any) {
  let formatted = formatFn !== void 0 ? formatFn(val) : val;
  formatted = formatted === void 0 || formatted === null ? '' : String(formatted);
  formatted = formatted.split('"').join('""');
  return `"${formatted}"`;
}

export function exportDataCsv(columns: any[], Data: any[],fileName:string){
  // @ts-ignore
  // @ts-ignore

  const content = [columns.map(col => wrapCsvValue(col.label))].concat(
    Data.map(row => columns.map(col => wrapCsvValue(
      typeof col.field === 'function'
        ? col.field(row)
        : row[ col.field === void 0 ? col.name : col.field ],
      col.format,
    )).join(','))
  ).join('\r\n')
  const status = exportFile(
    `${fileName}.csv`,
    content, {
      mimeType: 'text/csv',
      byteOrderMark: '\uFEFF', //解决乱码问题
      encoding:'utf-8'
    },
  )
  if (status !== true) {
    $q.notify({
      message: 'Browser denied file download...',
      color: 'negative',
      icon: 'warning'
    })
  }
}

Vue代码

import {exportDataCsv} from "src/untils/file/download";
<q-btn outline no-wrap :loading="loading" label="导出" icon="file_download" color="primary"   @click="exportExcel('字典值列表')"/>
const exportExcel = (fileName) =>{
  exportDataCsv(state.columns,state.typeList,fileName);
}