Teach you how to export Excel table from Element Plus front end

Table of contents

Demand background:

Project environment:

final effect:

Implementation:

1. Download the third-party dependency package:

pnpm download command:

npm download command:

2. Check whether the download is successful:

3. Introduce the page js that needs to be used

4. Write export table function

5. Add export button label

6. Add id to the original table

Problems that may arise:

Solution:

How to include custom .d.ts files into TypeScript compilation process?

---

Demand background:

The project needs to realize the export of the table table data of the page as an excel file

Project environment:

This function is implemented for Vue3+Element Plus based on the project environment

final effect:

 Click the button to download directly to the local

Implementation:

1. Download the third-party dependency package:

pnpm download command:

pnpm install --save xlsx file-saver

npm download command:

npm install --save xlsx file-saver

2. Check whether the download is successful:

The terminal displays:

 and can be seen in the package.json file:

"file-saver": "^2.0.5",
"xlsx": "^0.18.5"

Indicates that the download was successful

3. Introduce the page js that needs to be used

import FileSaver from 'file-saver'
import * as XLSX from 'xlsx';

4. Write export table function

function exportClick() {
  const wb = XLSX.utils.table_to_book(document.querySelector('#my-table'))// 关联dom节点
  /* get binary string as output */
  const wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array',
  })
  try {
    FileSaver.saveAs(new Blob([wbout], {
      type: 'application/octet-stream',
    }), '心理测试成绩.xlsx')
  }
  catch (e) {
    // eslint-disable-next-line max-statements-per-line, no-console
    if (typeof console !== 'undefined') { console.log(e, wbout) }
  }
  return wbout
}

5. Add export button label

<el-button type="warning" plain @click="exportClick ">
    导出表格
</el-button>

6. Add id to the original table

<el-table id="my-table" :data="filterTableData" style="width: 100%;">

Problems that may arise:

• import FileSaver from 'file-saver'报红
• The red location is 'file-saver'
• The error message shows: The declaration file for the module "file-saver" cannot be found.

Solution:

1. custom.d.tsCreate a new file called (or another name of your choosing) in the root of your project .
2. Add the following to that file:

   declare module 'file-saver';

3. Include this .d.tsfile in your TypeScript compilation process.

Doing so will manually create a module declaration that tells the TypeScript compiler what to do with file-saverthe module's types.

How to include custom .d.tsfiles in TypeScript compilation process?

1. Open the file in the project tsconfig.json. If there is no such file, please create a new tsconfig.jsonone in the project root directory.

2. In tsconfig.jsonthe file, add or modify includethe property, making sure it includes the path or file where your .d.tsfile is located:

   {
     "compilerOptions": {
       // 其他选项...
     },
     "include": [
       "src", // 示例，包含您的源代码目录
       "custom.d.ts" // 添加您的自定义.d.ts文件
     ]
   }
   

   Note that the path and file name need to be adjusted according to the actual situation.

3. Save and close tsconfig.jsonthe file.

Reference article: Import and export excel files based on Element Plus tables_elementplus file export excel_Latte drink pudding blog-CSDN blog