前端導出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() 是一一對應的）
在這里插入圖片描述

<template><div class="button-box"><a-space><a-button type="danger" @click="downWord2">模板導出word文件</a-button></a-space></div>
</template><script lang="ts">
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'),};},
});
</script><style lang="less" 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 html><html><head><style>.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>
</head><body><div class="MaxBox"><div class="fromBox"><div class="formTitle_first">上報信息</div><div class="formTitle_second">上報信息</div><div class="formContent_box display_flex" style="display:flex"><span class="formContent_box_title" >事件類型：</span><span>${reportInfoDetail['eventTypeName']}</span></div><div class="formContent_box display_flex" style="display:flex"><span class="formContent_box_title">地點定位：</span><span>${reportInfoDetail['locationAddress']}</span></div><div class="formContent_box display_flex" style="display:flex"><span class="formContent_box_title">上報時間：</span><span>${reportInfoDetail['reportTime']}</span></div><div class="formContent_box display_flex" style="display:flex"><span class="formContent_box_title">人員姓名：</span><span>${reportInfoDetail['reportUserName']}</span></div><div class="formContent_box display_flex" style="display:flex"><span class="formContent_box_title">聯系方式：</span><span>${reportInfoDetail['reportUserPhone']}</span></div><div class="formTitle_second">圖片附件</div><div class="formContent_box">${reportInfoDetail['picIds']?.map((res1: any, idx1: any) => {return `<img width='240' height='160' src="${rootUrl}/fyVolunteer/file/download/${res1}?rbacToken=${rbacToken}"style='margin-right:5px'/>${((idx1 + 1) % 2 == 0) ? `<br />` : ''}`})}</div><div class="formTitle_second">事件描述</div><div class="formContent_box">${reportInfoDetail['description']}</div></div>${reportInfoDetail.assignInfo.length != 0 ?`<div class="fromBox"><div class="formTitle_first">指派信息</div><div class="formTitle_second  display_flex">指派信息</div><div class="formContent_box"><div class="formContent_box_title">指派單位：${reportInfoDetail.assignInfo.map((res: any, idx: any) => {return `<span style="margin-right:15px">${res.departmentName}</span>`})}</div ></div ><div class="formContent_box  display_flex"><span class="formContent_box_title">指派時間：</span><span>${!!reportInfoDetail?.assignInfo[0]?.assignTime ? reportInfoDetail?.assignInfo[0]?.assignTime : ""}</span></div></div>`: ''}  <div class="fromBox"><div class="formTitle_first">處置信息</div>${reportInfoDetail.handleInfo.length != 0 ?reportInfoDetail.handleInfo.map((itm: any, idx: any) => {return `<div class="formTitle_second">單位${idx + 1}：${itm['claimDepartmentName']}</div><div class="formTitle_second">簽收信息</div><div class="formContent_box display_flex"style="width:32vw;justify-content: space-between;"><div><span>簽收單位：${itm['claimDepartmentName']}</span></div><div><span>簽收時間：${itm['claimTime']}</span></div></div ><div class="formTitle_second">圖片附件</div><div class="formContent_box">${itm['handleTime'] != null ?itm['handlePicIds']?.map((res1: any, idx1: any) => {return `<img width="240" height="160"src="${rootUrl}/fyVolunteer/file/download/${res1}?rbacToken=${rbacToken}"style="margin-right:5px"/>${(idx1 + 1) % 2 == 0 ? `<br />` : ''}`}) : `<span style="color:#5558e8">無</span>`}</div><div class="formTitle_second">處置描述</div><div class="formContent_box">${itm.handleTime != null ? itm['handleDescription'] : `<span style="color:#5558e8">未上傳處置</span>`}</div><div class="formTitle_second">上報信息</div><div class="formContent_box display_flex"style="width:32vw;justify-content: space-between;"><div><span>上報單位：${itm['claimDepartmentName']}</span></div><div><span>上報時間：${itm['handleTime'] != null ? itm['handleTime'] : ''}</span></div></div><br/>`}) : '無數據'}</div ><div class="fromBox"><div class="formTitle_first">其他信息</div><div class="formContent_box  display_flex"><span class="formContent_box_title">信息狀態：</span><span>${list[eventState - 1].desc}${reportInfoDetail?.finishTime != null ? reportInfoDetail?.finishTime : ''}</span></div><div class="formContent_box  display_flex"><span class="formContent_box_title">采納狀態：</span><span>${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;charset=utf-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],];// 行列合并規則  c：col 列   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);};

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/714285.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/714285.shtml
英文地址，請注明出處：http://en.pswp.cn/news/714285.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

nginx如何配置命令啟動

nginx如何配置命令啟動

我安裝好nginx后&#xff0c;發現不能使用systemctl start nginx或者systemctl stop nginx來控制啟停 解決方法如下 首先要建一個nginx.pid的文件 一般是建在 /var/run/這個路徑下面 sudo touch /var/run/nginx.pid 添加權限 sudo chmod 644 /var/run/nginx.pid可以進入到…
閱讀更多...
springboot 定時任務備份mysql數據庫

springboot 定時任務備份mysql數據庫

記錄在Linux 系統上定時備份MySQL數據庫 1、在代碼中添加備份 package org.jeecg.modules.xczxhhr.job;import lombok.extern.slf4j.Slf4j; import org.quartz.Job; import org.quartz.JobExecutionContext;import java.io.BufferedReader; import java.io.File; import java…
閱讀更多...
數據結構-----反射

數據結構-----反射

文章目錄 反射1.定義2 用途(了解)3 反射基本信息4 反射相關的類&#xff08;重要&#xff09;4.1 Class類(反射機制的起源 )4.1.1 Class類中的相關方法(方法的使用方法在后邊的示例當中) 4.2 反射示例4.2.1 獲得Class對象的三種方式4.2.2 反射的使用 5、反射優點和缺點6 重點總…
閱讀更多...
雙周回顧#005 - 零

雙周回顧#005 - 零

一件悲傷的事實&#xff0c;這兩周&#xff0c;成長值為零&#xff5e;&#xff5e; 從大數據部門臨時抽調到互聯網部門&#xff0c;支援重構的“配置下單”項目。 一個變種的低代碼架構設計&#xff0c;唯一比較有意思的是它的業務組件的設計與校驗設計&#xff0c;算是學習…
閱讀更多...
怎么把人物從圖中摳出?分享幾種好用的摳圖方法

怎么把人物從圖中摳出?分享幾種好用的摳圖方法

在日常生活中&#xff0c;我們時常需要將人物從繁雜的背景中優雅地提取出來&#xff0c;無論是為了制作一張精美的證件照&#xff0c;還是為了設計一幅引人注目的海報或宣傳畫。然而&#xff0c;對于許多非專業人士來說&#xff0c;這仿佛是一場與細節的捉迷藏游戲&#xff0c;…
閱讀更多...
MySQL深入——23

MySQL深入——23

主機內存只有100G&#xff0c;現在對一個200G的大表進行掃描&#xff0c;會不會把數據庫的內存用完。 對大表做全表掃描對Sever層的影響 假設現對一個200G的InnoDB表db1&#xff0c;做一個全表掃描&#xff0c;當然要把掃描結果保存到客戶端。 InnoDB的數據時保存在主鍵索引…
閱讀更多...
數據結構從入門到精通——順序表

數據結構從入門到精通——順序表

順序表 前言一、線性表二、順序表2.1概念及結構2.2 接口實現2.3 數組相關面試題2.4 順序表的問題及思考 三、順序表具體實現代碼順序表的初始化順序表的銷毀順序表的打印順序表的增容順序表的頭部/尾部插入順序表的頭部/尾部刪除指定位置之前插入數據和刪除指定位置數據順序表元…
閱讀更多...
Linux如何查看端口是否占用

Linux如何查看端口是否占用

在Linux中&#xff0c;有多種方法可以用來檢查端口是否被占用。以下是一些常用的命令&#xff1a; netstat&#xff1a;這是一個非常通用的命令&#xff0c;可以用來查看所有端口的使用情況。如果你想查找特定的端口是否被占用&#xff0c;可以使用netstat命令配合grep。例如&…
閱讀更多...
【MySQL】DQL

【MySQL】DQL

DQL&#xff08;數據查詢語言&#xff09;用于在MySQL數據庫中執行數據查詢操作。它主要包括SELECT語句&#xff0c;用于從表中檢索數據。 0. 基本語法 SELECT 字段列表 FROM 表名列表 WHERE 條件列表 GROUP BY 分組字段列表 HAVING 分組后條件列表 ORDER BY 排序字段列表 …
閱讀更多...
未來醫療技術的發展方向在Python中的重要性

未來醫療技術的發展方向在Python中的重要性

未來醫療技術的發展方向在Python中的重要性體現在以下幾個方面&#xff1a; 數據分析和人工智能&#xff1a;Python作為一種強大的數據分析語言&#xff0c;可以進行大規模的數據處理、分析和挖掘。在醫療領域&#xff0c;大量的醫療數據可以通過Python進行分析&#xff0c;幫助…
閱讀更多...
【市工信】2024年青島市綠色工廠、綠色工業園區等綠色制造示范申報

【市工信】2024年青島市綠色工廠、綠色工業園區等綠色制造示范申報

科大睿智小編從青島市工信局了解到&#xff0c;為深入貫徹綠色發展理念&#xff0c;牢固樹立綠色低碳發展導向&#xff0c;進一步完善綠色制造體系&#xff0c;培育綠色制造先進典型&#xff0c;根據《工業和信息化部關于印發<綠色工廠梯度培育及管理暫行辦法>的通知》&a…
閱讀更多...
springcloud：3.1介紹雪崩和Resilience4j

springcloud：3.1介紹雪崩和Resilience4j

災難性雪崩效應 簡介 服務與服務之間的依賴性，故障會傳播，造成連鎖反應，會對整個微服務系統造成災難性的嚴重后果，這就是服務故障的“雪崩”效應。 原因 1.服務提供者不可用（硬件故障、程序bug、緩存擊穿、用戶大量請求） 2.重試加大流量（用戶重試，代碼邏輯重試） 3.服…
閱讀更多...
在golang中使用protoc

在golang中使用protoc

【Golang】proto生成go的相關文件 推薦個人主頁&#xff1a;席萬里的個人空間 文章目錄 【Golang】proto生成go的相關文件1、查看proto的版本號2、安裝protoc-gen-go和protoc-gen-go-grpc3、生成protobuff以及grpc的文件 1、查看proto的版本號 protoc --version2、安裝protoc-…
閱讀更多...
Acwing 周賽132 解題報告 | 珂學家 | 并查集 + floyd尋路

Acwing 周賽132 解題報告 | 珂學家 | 并查集 + floyd尋路

前言 整體評價 A. 大小寫轉換 Q: 把字符串s統一成小寫字母形態 題型&#xff1a;簽到 知識點: 考察字符串的API題 c可以借助transform函數&#xff0c;進行轉化 #include <bits/stdc.h>using namespace std;int main() {string s;cin >> s;// 把自己轉化為小寫…
閱讀更多...
10-Java裝飾器模式 ( Decorator Pattern )

10-Java裝飾器模式 ( Decorator Pattern )

Java裝飾器模式 摘要實現范例 裝飾器模式&#xff08;Decorator Pattern&#xff09;允許向一個現有的對象添加新的功能&#xff0c;同時又不改變其結構 裝飾器模式創建了一個裝飾類&#xff0c;用來包裝原有的類&#xff0c;并在保持類方法簽名完整性的前提下&#xff0c;提供…
閱讀更多...
代購程序api接口采集商品信息接入演示示例

代購程序api接口采集商品信息接入演示示例

以下是一個使用Java編寫的簡單示例&#xff0c;演示如何通過API接口采集商品信息并接入到代購程序中&#xff1a; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import java.io.InputStreamReader; import java.io.Reader; impor…
閱讀更多...
vue使用swiper（輪播圖）-真實項目使用

vue使用swiper（輪播圖）-真實項目使用

一、安裝 我直接安裝的vue-awesome-swiper": "^3.1.3"指定版本 npm install vue-awesome-swiper3.1.3 swiper --save二、vue頁面使用&#xff0c;寫了一個小demo <template><div class"vue-swiper"><h1>{{ msg }}</h1><…
閱讀更多...
陶瓷工業5G智能制造工廠數字孿生可視化平臺，推進行業數字化轉型

陶瓷工業5G智能制造工廠數字孿生可視化平臺，推進行業數字化轉型

陶瓷工業5G智能制造工廠數字孿生可視化平臺&#xff0c;推進行業數字化轉型。在陶瓷工業領域&#xff0c;5G智能制造工廠數字孿生可視化平臺的應用正在改變著行業的傳統生產模式&#xff0c;推動著數字化轉型的進程。本文將圍繞這一主題展開探討&#xff0c;分析數字孿生可視化…
閱讀更多...
Unity GC + C# GC + Lua GC原理

Unity GC + C# GC + Lua GC原理

Unity垃圾回收原理 參考文章&#xff1a;垃圾回收 (計算機科學) - 維基百科&#xff0c;自由的百科全書 (wikipedia.org) 在計算機科學中&#xff0c;垃圾回收&#xff08;英語&#xff1a;Garbage Collection&#xff0c;縮寫為GC&#xff09;是指一種自動的存儲器管理機制。…
閱讀更多...
配置之道：深入研究Netty中的Option選項

配置之道：深入研究Netty中的Option選項

歡迎來到我的博客&#xff0c;代碼的世界里&#xff0c;每一行都是一個故事 配置之道&#xff1a;深入研究Netty中的Option選項 前言Option的基礎概念ChannelOption與Bootstrap Option常見的ChannelOption類型ChannelConfig的使用Option的生命周期不同傳輸協議的Option 前言 在…
閱讀更多...
最新文章

Copyright @ 2022~2023