前端导出word文件的多种方式、前端导出excel文件

文章目录

• 纯前借助word模板端导出word文件 （推荐）
• • 使用模板导出
  • 前端通过模板字符串导出word文件
  • 前端导出 excel文件，node-xlsx导出文件，行列合并

    纯前借助word模板端导出word文件 （推荐）

    先看效果：

    这是页面中的table

    这是导出后的效果：

    使用模板导出

    需要的依赖：

    npm 自行安装，需要看官网的具体参数自行去github上面找对应的参数

     "docxtemplater": "^3.46.0",    "pizzip": "^3.1.6",    "jszip-utils": "^0.1.0",    "file-saver": "^2.0.5",

    具体代码：（先看word模板，在看代码，word中的变量和代码中 doc.setData() 是一一对应的）

                模板导出word文件      import { defineComponent, onMounted, reactive, PropType, ref } from 'vue';import { message } from 'ant-design-vue';import moment from 'moment';import { downloadPDF } from '../../../../utils/utils';import { useTable } from './hooks/useTable';import xlsx from 'node-xlsx';import docxtemplater from 'docxtemplater';import PizZip from 'pizzip';import JSZipUtils from 'jszip-utils';import { saveAs } from 'file-saver';export default defineComponent({  props: {    /**     * 基础数据     */    baseData: {      type: Object as PropType        taskId: string;        barcodeId: string;      },      default: {},    },    /**     * 样本名称     */    barcodeName: {      type: String,    },  },  setup(props) {    let width = 100;    const { barcodeName } = props;    const { taskId, barcodeId } = props.baseData;    const { tableConfig, tableConfigLeft, getDta } = useTable();    onMounted(() => {      barcodeName ? getDta(taskId, barcodeName) : '';    });        const tableValue = reactive({      unit: '中国',      date: undefined,      sampleType: '你猜',      people: '黄种人',      name: '夜空',      sex: '男',      age: '25',      work: '开发',      id: '',      jiance: '商品化试剂盒',      date2: undefined,    });       const downWord2 = () => {      let docxname = '导出word.docx';      JSZipUtils.getBinaryContent('/test.docx', function (error: any, content: any) {        // test.docx是模板（这里我放到public公共文件夹下面了）。我们在导出的时候，会根据此模板来导出对应的数据        // 抛出异常        if (error) {          throw error;        }        // 创建一个PizZip实例，内容为模板的内容        let zip = new PizZip(content);        // 创建并加载docx templater实例对象        let doc = new docxtemplater().loadZip(zip);        // 设置模板变量的值  主要变量替换在这里        doc.setData({          name: tableValue.name,          unit: tableValue.unit,          date: moment(tableValue.date).format('YYYY-MM-DD'),          sampleType: tableValue.sampleType,          sex: tableValue.sex,          age: tableValue.age,        });        try {          // 用模板变量的值替换所有模板变量          doc.render();        } catch (error: any) {          // 抛出异常          let e = {            message: error.message,            name: error.name,            stack: error.stack,            properties: error.properties,          };          console.log(            JSON.stringify({              error: e,            }),          );          throw error;        }        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）        let out = doc.getZip().generate({          type: 'blob',          mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',        });        // 将目标文件对象保存为目标类型的文件，并命名        saveAs(out, docxname);      });    };    return {      downWord2,      getDta,      tableConfig,      tableConfigLeft,      tableValue,      downloadPDF,      value4: ref('less'),    };  },});

    前端通过模板字符串导出word文件

    包依赖：

     "file-saver": "^2.0.5",

    代码

    import FileSaver from 'file-saver';import htmlDocx from "html-docx-js/dist/html-docx"import { G } from '@/global';const { rootUrl, rbacToken } = G;let cycle_info1 = [  {    name: '事件类型',    key: 'eventTypeName',  },  {    name: '地点定位',    key: 'locationAddress',  },  {    name: '上报时间',    key: 'reportTime',  },  {    name: '人员姓名',    key: 'reportUserName',  },  {    name: '联系方式',    key: 'reportUserPhone',  },]const model = (reportInfoDetail: any, list: any, eventState: any) => {  // console.log(reportInfoDetail, list, eventState);  return (    `                .MaxBox {      padding: 0px 15px;      overflow-y: auto;      height: 50vh;    }    .fromBox {}    .formTitle_first {      color: #1c69f7;      font-size: 23px;      font-weight: bold;      margin-bottom: 10px;    }    .formTitle_second {      font-weight: bold;      font-size: 16px;      margin-bottom: 10px;    }    .formContent_box {      margin-bottom: 5px;    }    .formContent_box_title {      min-width: 60px;    }    .display_flex {      display: flex;    }              上报信息      上报信息              事件类型：        https://blog.csdn.net/qq_43940789/article/details/${reportInfoDetail['eventTypeName']}                    地点定位：        https://blog.csdn.net/qq_43940789/article/details/${reportInfoDetail['locationAddress']}                    上报时间：        https://blog.csdn.net/qq_43940789/article/details/${reportInfoDetail['reportTime']}                    人员姓名：        https://blog.csdn.net/qq_43940789/article/details/${reportInfoDetail['reportUserName']}                    联系方式：        https://blog.csdn.net/qq_43940789/article/details/${reportInfoDetail['reportUserPhone']}                图片附件              https://blog.csdn.net/qq_43940789/article/details/${reportInfoDetail['picIds']?.map((res1: any, idx1: any) => {      return `