django + vue导出功能实现上

Abadbeginning
255 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第23天，点击查看活动详情。

0 环境

  • 编辑器：idea,vscode
  • 系统版本：win10
  • python版本：3.9.6
  • vue版本：2.xx(3.xx也可以的)

1 前期准备

后端pip安装xlsxwriter，为了兼顾到数据量大的情况，用它更合适。当然还可以用openpyxl，但是都差不多。

2 功能

当我在界面上点击导出这个按钮，自动从后端下载excel文件。

image.png

3 常见用法

别人的代码是这么调用这个，关键点：类型blob，其他的就不用多说了，这种是一个很好的方法，很值得借鉴。网上还有其他的方式，比如你的表格么有操作项目，可以通过选择器，直接获取表格的id或其他属性(获取到了节点)，然后创建工作薄，写入。 image.png

3 使用前端导出(了解即可)

1 安装库

npm install --save xlsx file-saver

2 导入组件

这一步一定要做，用的频率高全局组件，用的频率不高，局部组件导入就行，比如我用的不多，我选择后者。下面的代码，我就不会在代码里，导入组件了，默认已经导入了。

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

3 常用的方法说明

参考文档

XLSX.utils.table_to_book基于工作表会产生一个最小的工作簿。

XLSX.write(wb, write_opts) 用来写入工作簿 wb。

FileSaver.saveAs(new Blob([写入的wb],type)，文件名)，调用的XLSX.writeFile

XLSX.utils.book_new工具函数创建一个新的工作簿对象

aoa_to_sheet 把转换JS数据数组的数组为工作表。

XLSX.utils.book_append_sheet把表添加到工作簿中。

由于有几种实现的方式，我用4-1，4-2表示方式1，方式2。。。依次类推。

4-1 节点

一般在el-table上定义id或ref等方式。导出按钮绑定下面这个方法即可。大致思路：节点定位，创建工作薄，写入到工作薄，保存文件另存为某某文件名。针对导出文件么有太多多余项(字段)，毕竟你要在正则去掉，还是很繁琐的，假如你是有分页，抓的只是当前页的内容，就会比较麻烦，你需要循环抓，假如不是分页的话，可以这么整。

try {
    const $e = this.$refs['multipleTable'].$el;
    let $table = $e.querySelector('.el-table__fixed');
    if (!$table) {
        $table = $e;
    }
    const wb = XLSX.utils.table_to_book($table, { raw: true });
    console.log('wb: ' + JSON.stringify(wb));
    console.log(wb.Sheet1);
    const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '导出.xlsx');
} catch (e) {
    if (typeof concole !== 'undefined') console.error(e);
}

4-2 通过数组导出excel

通过数组导出，数组也分两个部分组成，数组[0] --> 对应着header或者说表格对应的中文字段或者标题，而下面的即是表格的具体数据，这里的数据呢，一种直接访问后台获取数组，还有一种表格初始化的数据，在重新数据组合，但是数据复杂的话，直接后端获取，不麻烦的话，通过复制表格初始化数据，重新组合成我们的数组格式也是可以的。直接复制下面代码，修改文件名即可。还有数据是json的情况，但是平时的用得少，大家有空搜索一下。

let data = [
    ['标题1', '标题2'],
    [3, 4]
];

const ws= XLSX.utils.aoa_to_sheet(data);
const filename = "download.xlsx";

const wb = XLSX.utils.book_new();

XLSX.utils.book_append_sheet(wb, ws,  'Sheet1');

XLSX.writeFile(wb,  filename);

4 vue

我用这个方法不是最好的，纯粹为了省事。前端就用一个a标签，直指后端导出地址。

<template>
    <a :href="href" target="_blank">
        <el-button type="warning" plain icon="el-icon-download" size="mini">导出</el-button>
    </a>
</template>

export default {
    name: "xx",
    data() {
        return {
            href: 对应的后端url
        }
    }
}

5 总结

了解使用vue组件点击导出按钮，触发click事件，调用npm相应excel写入库，无非传入的数据的不同，一种抓取表格的节点，拿到数据，创建写入保存文件，但是不适合分页和过滤很多字段的表格。还有一种以数组的形式，传入数据，数组[0]固定表格头，从下标1开始表格的数据，正常从后台拿到数组，不复杂的情况，可以通过得到表格初始化的数据，进行改变存入到数组中。还有json数据传入，自行了解。我用的是懒人法：a标签。要么用别人封装好的js。

avatar
文章
阅读
粉丝