vue3.0导出excel带格式
生活随笔
收集整理的這篇文章主要介紹了
vue3.0导出excel带格式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這個真的困擾了我整整一天，我嘗試了xlxs file-saver兩個組件的版本，怎么搞都不行
先不說vue3.0 不能import進來，只能require(‘xlxs’),require(‘file-saver’)
把這兩個插件引入是能導出excel的，但是不支持更改樣式；
寫法如下：
查了另一種方式，通過Blob.js,Export2Excel的寫法 ，參考： https://www.cnblogs.com/-wenli/p/14843432.html，但是我代碼寫法是ts，調了半天總算不報錯了，結果還是跑不起來，放棄
或者引入xlxs-style插件修改，但是這個需要修改源代碼，我想著到時候打包到生產得手動打包，項目不允許就放棄這個方法了，到底能不能跑起來暫時未知
終于找到了一個方法：參考https://www.jb51.net/article/186856.htm，解決了，困擾了我一天的問題解決了，就這么幾行代碼，啥都不用安裝，原理暫時不懂，但是解決了問題。等有時間研究研究
template里面的東西<el-button @click="exportFun">導出</el-button><adownload="table導出Excel"id="excelOut"href="#"rel="external nofollow">table導出Excel</a><table border="1" style="height: 200px; width: 1200px" id="exporttable"><tr><td colspan="9" style="color: red; font-size: 22px">標題111111111</td><!--注意此處的td標簽由原來的三個變為一個--></tr><tr><td>報送機關名稱</td><td>123123</td><td colspan="7">111</td></tr><tr><td><span style="color: red">必填</span>報告期限</td><td>8</td><td colspan="7">6</td></tr><tr><td>填報日期</td><td>8</td><td colspan="7">6</td></tr><tr><td colspan="9">填表說明：；<br />這是數據 <br />換行了 </td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr></table>js里面的代碼：function exportFun() {tableToExcel("exporttable", "下載模板");}//base64轉碼function base64(s: any) {return window.btoa(unescape(encodeURIComponent(s)));}//替換table數據和worksheet名字function format(s: any, c: any) {return s.replace(/{(\w+)}/g, function (m: any, p: any) {return c[p];});}function tableToExcel(tableid: any, sheetName: any) {var uri = "data:application/vnd.ms-excel;base64,";var template ='<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' +'xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>' +"<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>" +"</x:ExcelWorkbook></xml><![endif]-->" +' <style type="text/css">' +"table td {" +"border: 1px solid #000000;" +"width: 200px;" +"height: 30px;" +" text-align: center;" +"background-color: #4f891e;" +"color: #ffffff;" +" }" +"</style>" +'</head><body ><table class="excelTable">{table}</table></body></html>';if (!tableid.nodeType) tableid = document.getElementById(tableid);var ctx = {worksheet: sheetName || "Worksheet",table: tableid.innerHTML,};const a: any = document.getElementById("excelOut");a.href = uri + base64(format(template, ctx));a.click();}總結
以上是生活随笔為你收集整理的vue3.0导出excel带格式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Win10-1809 离线安装 .net
- 下一篇： 我决定切换到 Vue.js，不再使用 R