前端导出Excel带样式

最新推荐文章于 2024-06-30 07:32:28 发布
最新推荐文章于 2024-06-30 07:32:28 发布
阅读量372 收藏
点赞数
文章标签： excel
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44977477/article/details/117108119
版权
这段代码展示了如何使用JavaScript生成一个包含公司维修案例详细信息的Excel文件。它包括标题、服务次数、合同号、服务内容等信息，并对数据进行格式化。文件以HTML表格的形式创建，然后转换为Excel格式供用户下载。
摘要由CSDN通过智能技术生成

效果
在这里插入图片描述
代码

DekExcel1: function () {
      // 标题
      let tiuelestyle =
        "width:165px;height:150px;line-height:120px;color:#0000ff;font-size:40px;padding-left:180px;box-sizing:border-box;font-family:宋体;font-weight:bolder;";
      // 标椎
      let wh = "width:165px;height:80px;line-height:50px;";
      //   序号
      let wh1 = "width:50px;height:80px;line-height:50px;";
      //   服务次数记录
      let w40 = "width:250px;height:40px;line-height:50px;";
      //   合同号
      let wh200 = "width:250px;height:80px;line-height:50px;";
      //   服务内容
      let wh400 = "width:400px;line-height:50px;";
      //   居中
      let tac = "text-align:center;";
      // 字体
      let fontST = 'font-family: "宋体";';
      let uri = "data:application/vnd.ms-excel;base64,";

      let title = "北京英之杰天祥汽车技术服务有限公司 ";
      let title2 =
        "Repair case for " +
        this.BaleTable.ContractNo +
        " in " +
        this.BaleTable.Begin.split("T")[0] +
        " to " +
        this.BaleTable.End.split("T")[0] +
        "";
      let mingxi = "上门总次数：" + this.BaleTable.ComeTotalDtos.TotalCount;
      let title2Style =
        "width:165px;height:70;background:#f60;line-height:70px;font-size:30px;text-align:center;font-weight:bolder;";
      let spanStyle = "font-family:none;font-size:30px;font-weight:bolder;";
      let Tr1 =
        "background:#ee0;font-weight:bolder;font-size:20px;height:100px;line-height:33px;";
      // 插入合同
      let mains = "";

      let mani = 0;
      for (
        let index = 0;
        index < this.BaleTable.ASCostStatPartDtos.length;
        index++
      ) {
        var row = this.BaleTable.ASCostStatPartDtos[index];
        mani += row.TotalPrice;
        mains += `
                    <tr>
                        <td style='${wh1 + tac}'>${index + 1}</td>
                        <td style='${wh200 + tac}'>${row.SOCode}</td>
                        <td style='${wh400 + tac}'>${row.Details}</td>
                        <td style='${wh + tac}'>${this.permil1(
          row.TotalPrice
        )}</td>
                        <td style='${wh + tac}'>${row.ContactINF}</td>
                        <td style='${wh + tac}'>${
          row.Engineers == null ? " - " : row.Engineers
        }</td>
                        <td style='${wh + tac}'>${row.Remark}</td>
                    </tr>
                `;
      }

      mains += `
                    <tr>
                        <td  colspan='3' style='${wh + tac}' > TOTAL</td>
                   
                        <td style='${wh + tac}'>${this.permil1(mani)}</td>
                        <td style='${wh + tac}'></td>
                        <td style='${wh + tac}'></td>
                        <td style='${wh + tac}'></td>
                    </tr>
                `;
      //   插入上门记录
      let Smen = `
                    <tr>
                        <td  ></td>
                        <td style='${
                          w40 + tac + "color:#0000ff;"
                        }'>服务内容</td>
                        <td ></td>
                        <td ></td>
                        <td ></td>
                        <td ></td>
                        <td ></td>
                    </tr>
                `;
      for (
        let index = 0;
        index < this.BaleTable.ComeTotalDtos.CountDetail.length;
        index++
      ) {
        var row = this.BaleTable.ComeTotalDtos.CountDetail[index];

        Smen += `
                    <tr>
                        <td ></td>
                        <td style='${w40 + tac}'>${row}</td>
                        <td ></td>
                        <td ></td>
                        <td ></td>
                        <td ></td>
                        <td ></td>
                    </tr>
                `;
      }

      Smen += `
                    <tr>
                        <td ></td>
                        <td style='${
                          w40 + tac + "color:#0000ff;"
                        }'>服务人员</td>
                        <td ></td>
                        <td ></td>
                        <td ></td>
                        <td ></td>
                        <td ></td>
                    </tr>
                `;

      for (
        let index = 0;
        index < this.BaleTable.ComeTotalDtos.EngineerDetail.length;
        index++
      ) {
        var row = this.BaleTable.ComeTotalDtos.EngineerDetail[index];

        Smen += `
                    <tr>
                        <td ></td>
                        <td style='${w40 + tac}'>${row}</td>
                        <td ></td>
                        <td ></td>
                        <td ></td>
                        <td ></td>
                        <td ></td>
                    </tr>
                `;
      }


      let 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>
				<meta charset="utf-8">
			</head>
			<body>
                <table border=1 style="${fontST}">
                    <tr>    
                    <img src="http://39.101.201.199:8005/images/inchwell.png" alt=""   />
                        <td colspan='7' style='${tiuelestyle}'>
                        <p>北京英之杰天祥汽车技术服务有限公司 <br> <span  style='${spanStyle}'> INCHWELL T & S (BEIJING) CO., LTD.</span> </p>
                       
                        </td>
                    </tr>


                    <tr>
                        <td colspan='7' style='${title2Style}'>${title2}</td>
                    </tr>

                    <tr >
                        <td style='${wh1 + tac + Tr1}'>序号 <br> PO.</td>
                        <td style='${wh200 + tac + Tr1}'>BMWZJKXZB201113AS</td>
                        <td style='${wh + tac + Tr1}'>维修内容 <br> Details</td>
                        <td style='${wh + tac + Tr1}'>合同金额 <br> TOTAL</td>
                        <td style='${
                          wh + tac + Tr1
                        }'>客户联系方式 <br> CONTACT INF.</td>
                         <td style='${
                           wh + tac + Tr1
                         }'>维修工程师 <br> ENGINEERS FOR REPAIRING</td>
                        <td style='${wh + tac + Tr1}'>备注 <br> REMARKS</td>
                    </tr>
                    ${mains}
                     <tr>
                        <td colspan='7' style='${title2Style}'>${mingxi}</td>
                    </tr>
                    ${Smen}


               

                </table>
			</body>
			</html>`;
      var ele = document.createElement("a");
      ele.download = title + ".xls"; //下载文件的名字
      ele.href = uri + window.btoa(unescape(encodeURIComponent(template)));
      document.body.appendChild(ele);
      ele.click();
      document.body.removeChild(ele);
    },
Jarvis Downey
关注
前端导出Excel（自定义样式、多级表头、普通导出）
隔鸡有料
05-16 3907
在做一个后台管理系统，需要做数据导出excel，于是采用了前端进行导出，前端可以根据配置字段进行数据生产excel，然后在浏览器进行下载。
前端读取导入的Excel文件并以表格样式展示在页面中
wancaicai_的博客
12-19 562
【代码】前端读取导入的Excel文件并以表格样式展示在页面中。
前端可视化展示Excel
u010227042的博客
08-25 1559
Excel可视化 后端返回Excel流前端进行展示 前言 需求：有的时候我们需要接收到后端返回的Excel流，前端进行可视化展示时，这个时候按照如下步骤即可 提前说明：前端展示的Excle样式与格式完全由后端控制，比如合并单元格、样式控制.. 前端Demo????：例子（有现成写好的接口） 安装依赖库 安装依赖库（二选一即可） npm install xlsx xlsx-style less less-loader@5.0.0 yarn add xlsx xlsx-sty
基于SheetJS以及XLSXStyle的纯前端带样式导出表格为Excel的工具包
08-12
基于SheetJS以及XLSX-Style的纯前端带样式导出表格为Excel的工具包
前端实现excel导出表格(纯前端实现)
liang04273的博客
01-06 2121
vue中前端自己实现excel导出表格。实现是给表格绑定一个id，通过获取dom来导出。
js导出带样式的excel.zip
09-02
js导出带样式的excel，简单易用，基于layui，欢迎下载，谢谢！
PCF 前端导出excel 自定义样式
fengdou696的博客
06-27 382
1、Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx 修改源码解决 / 暴露webpack配置项。//下载excel的三方包。2、can`t resolve fs in xlsx-style 通过增加webpack配置项可以解决 自行百度。使用场景 给自定excel中的指定cell 增加背景色 字体样式 等。exceljs是推荐在服务端使用的包，在浏览器端也是支持的。3、指定表头的某几列字体加粗、增加背景色。尝试其他方案，exceljs。
前端导出 excel ，设置字体，列宽，行高，对其方式，合并单元格等效果
06-23
总结来说，前端导出Excel涉及到数据转换、样式设置和文件生成等多个步骤。使用像`SheetJS`这样的库可以帮助简化这一过程，但正确配置和优化仍然是关键。在实际项目中，确保按照需求正确设置字体、列宽、行高、对齐...
前端导出excel，可以控制样式，单元格合并居中等
09-08
通过"xlsx.full.min.js"这个库，我们可以实现前端直接导出带有样式的Excel文件，包括单元格的合并和居中对齐等高级功能。下面将详细介绍这个过程及涉及到的技术要点。 一、xlsx.full.min.js库介绍 "xlsx.full.min....
vue前端导出Excel.zip
05-22
在Vue.js前端开发中，导出...综上所述，Vue前端导出Excel涉及到选择合适的库，转换数据为工作簿格式，生成`Blob`对象，以及处理浏览器安全限制来实现下载。通过理解这些步骤，你可以根据项目需求灵活地实现导出功能。
使用js导出带样式的excel表格
12-25
使用js导出带样式的excel表格模板，有demo
基于JS实现table导出Excel并保留样式
11-20
浏览器环境：谷歌浏览器 1.在导出Excel的时候，保存table的样式，有2种方法，①是在table的行内写style样式，②是在模板里面添加样式 2.第一种方式：行内添加样式 公司一 效果： 完整代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table td { font-size: 12px; width: 200px; height: 30px; tex
js前端下载并编辑Excel样式
12-26
js前端下载并编辑Excel样式js前端下载并编辑Excel样式js前端下载并编辑Excel样式
ExcelJS 前端导出excel，echart图表
最新发布
weixin_40231090的博客
06-30 261
数据是一行一行的插入的！无论表头还是单身数据。合并行，列，使用 worksheet.mergeCells()设置样式 ,可以使一行一行的设置，也可以按照列去设置 worksheet.getRow(1).alignment = {vertical: ‘middle’, horizontal: ‘center’}设置行隐藏，worksheet.getRow(1).hidden = true;//隐藏第一行行 与 列 都是从1 开始的。
xlsx模块 前端_导出带样式的Excel功能模块的实现
weixin_28996083的博客
01-14 461
开发后台系统的过程中，常常有导出Excel的需求，虽然程序早已上线，闲暇之时也觉应总结。有关更多POI的文档资料，参考http://poi.apache.org/。Apache POI是Apache软件基金会的开放源码函式库，POI提供给Java程式对Microsoft Office格式档案读和写的功能。HSSF提供读写Mircosoft Excel XLS格式档案的功能，HSSF是Horribl...
vue前端导出Excel 并设置标题栏样式与导出样式
qq_44280090的博客
01-27 2298
vue利用Export2Excel.js做前端导出，实现导出样式自定义
导出带样式的Excel功能模块的实现
weixin_33694620的博客
01-14 278
2019独角兽企业重金招聘Python工程师标准>>> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值