做网站官网好处,工程建设分为哪几个阶段,wordpress author,机械加工网销平台文章目录 纯前借助word模板端导出word文件 #xff08;推荐#xff09;使用模板导出 前端通过模板字符串导出word文件前端导出 excel文件#xff0c;node-xlsx导出文件#xff0c;行列合并 纯前借助word模板端导出word文件 #xff08;推荐#xff09;
先看效果#xf… 文章目录 纯前借助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() 是一一对应的
templatediv classbutton-boxa-spacea-button typedanger clickdownWord2模板导出word文件/a-button/a-space/div
/templatescript langts
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),};},
});
/scriptstyle langless scoped/style
前端通过模板字符串导出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 (!DOCTYPE htmlhtmlheadstyle.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;}/style
/headbodydiv classMaxBoxdiv classfromBoxdiv classformTitle_first上报信息/divdiv classformTitle_second上报信息/divdiv classformContent_box display_flex styledisplay:flexspan classformContent_box_title 事件类型/spanspan${reportInfoDetail[eventTypeName]}/span/divdiv classformContent_box display_flex styledisplay:flexspan classformContent_box_title地点定位/spanspan${reportInfoDetail[locationAddress]}/span/divdiv classformContent_box display_flex styledisplay:flexspan classformContent_box_title上报时间/spanspan${reportInfoDetail[reportTime]}/span/divdiv classformContent_box display_flex styledisplay:flexspan classformContent_box_title人员姓名/spanspan${reportInfoDetail[reportUserName]}/span/divdiv classformContent_box display_flex styledisplay:flexspan classformContent_box_title联系方式/spanspan${reportInfoDetail[reportUserPhone]}/span/divdiv classformTitle_second图片附件/divdiv classformContent_box${reportInfoDetail[picIds]?.map((res1: any, idx1: any) {return img width240 height160 src${rootUrl}/fyVolunteer/file/download/${res1}?rbacToken${rbacToken}stylemargin-right:5px/${((idx1 1) % 2 0) ? br / : }})}/divdiv classformTitle_second事件描述/divdiv classformContent_box${reportInfoDetail[description]}/div/div${reportInfoDetail.assignInfo.length ! 0 ?div classfromBoxdiv classformTitle_first指派信息/divdiv classformTitle_second display_flex指派信息/divdiv classformContent_boxdiv classformContent_box_title指派单位${reportInfoDetail.assignInfo.map((res: any, idx: any) {return span stylemargin-right:15px${res.departmentName}/span})}/div /div div classformContent_box display_flexspan classformContent_box_title指派时间/spanspan${!!reportInfoDetail?.assignInfo[0]?.assignTime ? reportInfoDetail?.assignInfo[0]?.assignTime : }/span/div/div: } div classfromBoxdiv classformTitle_first处置信息/div${reportInfoDetail.handleInfo.length ! 0 ?reportInfoDetail.handleInfo.map((itm: any, idx: any) {return div classformTitle_second单位${idx 1}${itm[claimDepartmentName]}/divdiv classformTitle_second签收信息/divdiv classformContent_box display_flexstylewidth:32vw;justify-content: space-between;divspan签收单位${itm[claimDepartmentName]}/span/divdivspan签收时间${itm[claimTime]}/span/div/div div classformTitle_second图片附件/divdiv classformContent_box${itm[handleTime] ! null ?itm[handlePicIds]?.map((res1: any, idx1: any) {return img width240 height160src${rootUrl}/fyVolunteer/file/download/${res1}?rbacToken${rbacToken}stylemargin-right:5px/${(idx1 1) % 2 0 ? br / : }}) : span stylecolor:#5558e8无/span}/divdiv classformTitle_second处置描述/divdiv classformContent_box${itm.handleTime ! null ? itm[handleDescription] : span stylecolor:#5558e8未上传处置/span}/divdiv classformTitle_second上报信息/divdiv classformContent_box display_flexstylewidth:32vw;justify-content: space-between;divspan上报单位${itm[claimDepartmentName]}/span/divdivspan上报时间${itm[handleTime] ! null ? itm[handleTime] : }/span/div/divbr/}) : 无数据}/div div classfromBoxdiv classformTitle_first其他信息/divdiv classformContent_box display_flexspan classformContent_box_title信息状态/spanspan${list[eventState - 1].desc}${reportInfoDetail?.finishTime ! null ? reportInfoDetail?.finishTime : }/span/divdiv classformContent_box display_flexspan classformContent_box_title采纳状态/spanspan${reportInfoDetail.acceptInfo null ? 未采纳 : 已采纳(${reportInfoDetail.acceptInfo.integral})}/span/div/div/div
/body
/html )
}const loadFile (info: any) {let html model(info.reportInfoDetail, info.list, info.eventState)let blob new Blob([html], { type: application/msword;charsetutf-8 });// let blob htmlDocx.asBlob(html, { orientation: landscape });FileSaver.saveAs(blob, 信息管理文件.doc);
}export {loadFile
};
前端导出 excel文件node-xlsx导出文件行列合并
导出效果
需要的依赖 node-xlsx node-xlsx: ^0.23.0,代码 const downXlsx () {let data [[1, 222, , , , ],[, 2, 3, 4, 5, 6],[, 2, 3, 4, 5, 6],[, 2, 3, 4, 5, 6],[, 2, 3, 4, 5, 6],[22, 2, 3, 4, 5, 6],];// 行列合并规则 ccol 列 r:row 行const range0 { s: { c: 0, r: 0 }, e: { c: 0, r: 4 } };const range1 { s: { c: 1, r: 0 }, e: { c: 5, r: 0 } };const sheetOptions {!merges: [range0, range1],// cols 列宽大小!cols: [{ wch: 5 }, { wch: 10 }, { wch: 15 }, { wch: 20 }, { wch: 30 }, { wch: 50 }],};//如果不需要格式这里的sheetOptions可以省略不写let result xlsx.build([{ name: sheet1, data }], { sheetOptions });const ab Buffer.from(result, binary);const blob new Blob([ab]);const blobUrl URL.createObjectURL(blob);const a document.createElement(a);a.href blobUrl;a.download 导出excel.xlsx;a.click();window.URL.revokeObjectURL(blobUrl);};
