js 或者 vue表格导出Excel总结（发票/账单）

最新推荐文章于 2024-08-06 16:10:14 发布
最新推荐文章于 2024-08-06 16:10:14 发布
阅读量1.4k 收藏 8
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cscscssjsp/article/details/90045524
版权

1.自定义样式

2.自定义页边距

3.设置单元格输出

废话不多说，直接上代码

本例 是基于vue开发，代码格式保持vue风格,写在.vue组件里，如果使用js请自行转换

两种方式：

<template>
<div>
  <div>
    <button type="button" @click="ExportExcel">导出Excel(第一种方式)</button>
    <button type="submit" @click="tableToExcel('tableExcel','','test2.xlsx')" 
    class="btn btn-primary">
          <a id="download" href="" style="display: none;"></a>导出Excel（第二种方式）
     </button>
  </div>
  <div id="myDiv">
    <table id="tableExcel" style="width: 740px;">
      <thead>
      <tr>
       <td colspan="6" align="center" class="title">********账单（2019年05月）</td>
     </tr>
      <tr><td colspan="6" align="right">打印日期：2019年05月09日</td></tr>
      <tr><td colspan="4" class="company_name">名称：********有限公司</td>
        <td colspan="2" align="right">合同号：1255664155</td></tr>
      <tr><td class="company_name">房产：</td>
        <tdcolspan="5"class="company_name">1121,909,e3091121,
          909,e3091121,909,e3091121,909,e309112
        </td>
      </tr>
      </thead>
      <colgroup>
        <col class="table_read"/><col class="table_room"/><col class="table_room"/>
        <col class="table_read"/><col class="table_read"/><col class="table_read"/>
      </colgroup>
      <tbody>
      <tr align="center"><td class="table_head">费项</td><td class="table_head">房产</td>
       <td class="table_head">期间/读数|倍率</td><td class="table_head">数量</td>
       <td class="table_head">单价</td><td class="table_head">金额</td>
     </tr>
      <tr><td>租金</td><td class="ggg">101,e10022,1121,909,e309</td><class="ggg">ccc</td>
         <td>ddd</td><td align="right">0.20</td><td align="right">332.20</td>
      </tr>    
      <tr><td>管理费</td><td class="ggg">1121,909,e309</td><td class="ggg">CCC</td>
          <td>DDD</td><td align="right">2.63</td><td align="right">64652.32</td>
       </tr>
      <tr><td>电梯费</td><td class="ggg">1121,909,e309</td><td class="ggg">HHH</td>
       <td>III</td><td align="right">0.04</td><td align="right">121458.23</td>
      </tr>
      <tr><td>电费</td><td class="ggg">1121,909,e309</td><td class="ggg">HHH</td>
       <td>III</td><td align="right">0.40</td><td align="right">236.00</td>
      </tr>
      <tr><td>水费</td><td class="ggg">1121,909,e309</td><td class="ggg">HHH</td>
       <td>III</td><td class="hhh" align="right">2521221122</td>
       <td align="right">293658.92</td></tr>
      <tr><td rowspan="4">说明</td>
        <td colspan="3" rowspan="4">
          请于当月5日前缴清费用，费用有疑问请拨打0755-21000374，咨询转账请留言13799988555， 
          逾期按日收取月租金的0.5%违约金，
          逾期未交者，将按合同约定执行，恕不另行通知
        </td>
        <td align="right" class="ccc">本期总计：</td>
         <td align="right"class="ddd">11111.00</td>
      </tr>
      <tr><td align="right" class="ccc">往期欠缴：</td>
         <td align="right" class="ddd">440.00</td></tr>
      <tr><td align="right"  class="ccc">应付总额：</td>
       <td align="right" class="ddd">11551.00</td></tr>
      <tr ><td align="right" class="eee">违约金：</td>
      <td align="right" class="fff">22.00</td></tr>
      </tbody>
    </table>
  </div>

</div>
</template>

<script>
    export default {
      methods:{
        ExportExcel(data){// 第一种方式
          let lHtml = document.getElementById("myDiv").innerHTML;
          let tableHtml='<html><head><meta charset="UTF-8">' +
            '<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">'+
            '<style>' +
            '.title{\n' +
            '  font-size: 22px;\n' +
            'height: 32px;'+
            '}\n' +
            '.company_name{\n' +
            '  font-size: 16px;\n' +
            'height: 30px;'+
            '}'+
            ' .table_head{\n' +
            '  font-size: 14px;height: 24px;\n' +
            '  }\n'+
            'table{\n' +
            '  width: 740px;\n' +
            '  table-layout:fixed;' +
            '}\n' +
            'td{\n' +
            '  padding: 0 5px;\n' +
            '  overflow:hidden;\n' +
            '  mso-number-format:"\#\,\#\#0\.00"'+
            '}\n' +
            'tbody td{\n' +
            '  height: 30px;\n' +
            '  font-size: 15px;\n' +
            '  border:0.5px solid #000;'+
            '}\n' +
            '.ccc{\n' +
            '  border: 0;\n' +
            '}\n'+
            '.ddd{' +
            'border: 0;'+
            'border-right: 0.5px solid #000;\n' +
            '}\n'+
            '.eee{\n' +
            '  border: 0;\n' +
            '  border-bottom: 0.5px solid #000;\n' +
            '}\n' +
            '.fff{\n' +
            '  border: 0;\n' +
            '  border-bottom: 0.5px solid #000;\n' +
            '  border-right: 0.5px solid #000;\n' +
            '}'+
            '.ggg{' +  // 设置溢出省略号，无效
            '  word-break:keep-all;\n' +
            '  white-space:nowrap;\n' +
            '  overflow:hidden;\n' +
            '  text-overflow:ellipsis;\n' +
            '}'+
            '.hhh{' +
            '  mso-number-format:"\@";'+// 设置单元格类型
            '}'+
            ' .table_room{\n' +
            '    width: 170px;\n' +
            '  }\n' +
            ' .table_read{\n' +
            '    width: 100px;\n' +
            '  }'+
            '@page\n' +
            '  {margin:0.80cm 0.90cm 0.80cm 1.80cm; \n' +
            '   mso-header-margin:0.51cm;\n' +
            '   mso-footer-margin:0.51cm;}'+
            '</style>'+
            '</head><body>';
          tableHtml += lHtml;
          tableHtml += '</body></html>';
          console.log(tableHtml)
          let excelBlob = new Blob([tableHtml], {type: 'application/vnd.ms-excel'});
          let fileName = "test1.xls";
          if(this.isIE()){
            window.navigator.msSaveOrOpenBlob(excelBlob,fileName);
          }else{
            //  这里是两种方式的区别之处 直接导出HTML内容，这种在Excel表格里会自动使用
               // 文件名作为工作表名称
            let a = document.createElement('a');
            a.href = URL.createObjectURL(excelBlob);
            a.download = fileName;
            document.body.appendChild(a);
            a.click();
          }
        },
        <!****************第二种方式********************************>
        tableToExcel (tableId, name,filename) {
        if(this.isIE()){
            window.navigator.msSaveOrOpenBlob(excelBlob,fileName);
            return;
          }
          let uri = 'data:application/vnd.ms-excel;base64,',
            //Excel样式代码
            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]-->'+
              '<meta http-equiv=Content-Type content="text/html; charset=utf-8">'+
              '<style>' +
              '.title{\n' +
              '  font-size: 22px;\n' +
              'height: 32px;'+
              '}\n' +
              '.company_name{\n' +
              '  font-size: 16px;\n' +
              'height: 30px;'+
              '}'+
              ' .table_head{\n' +
              '  font-size: 14px;height: 24px;\n' +
              '  }\n'+
              'table{\n' +
              '  width: 740px;\n' +
              '  table-layout:fixed;' +
              '}\n' +
              'td{\n' +
              '  padding: 0 5px;\n' +
              '  overflow:hidden;\n' +
              '  mso-number-format:"\#\,\#\#0\.00"'+
              '}\n' +
              'tbody td{\n' +
              '  height: 30px;\n' +
              '  font-size: 15px;\n' +
              '  border:0.5px solid #000;'+
              '}\n' +
              '.ccc{\n' +
              '  border: 0;\n' +
              '}\n'+
              '.ddd{' +
              'border: 0;'+
              'border-right: 0.5px solid #000;\n' +
              '}\n'+
              '.eee{\n' +
              '  border: 0;\n' +
              '  border-bottom: 0.5px solid #000;\n' +
              '}\n' +
              '.fff{\n' +
              '  border: 0;\n' +
              '  border-bottom: 0.5px solid #000;\n' +
              '  border-right: 0.5px solid #000;\n' +
              '}'+
              '.ggg{' +
              '  word-break:keep-all;\n' +
              '  white-space:nowrap;\n' +
              '  overflow:hidden;\n' +
              '  text-overflow:ellipsis;\n' +
              '}'+
              '.hhh{' +
              '  mso-number-format:"\@";'+
              '}'+
              ' .table_room{\n' +
              '    width: 170px;\n' +
              '  }\n' +
              ' .table_read{\n' +
              '    width: 100px;\n' +
              '  }'+
              '@page\n' +   // 设置页边距，以厘米为单位，也可以以英寸in为单位
              '  {margin:0.80cm 0.90cm 0.80cm 1.80cm; \n' +
              '   mso-header-margin:0.51cm;\n' +
              '   mso-footer-margin:0.51cm;}'+
              '</style>'+
              '</head><body><table><colgroup>\n' +
              '<col class="table_read"/><col class="table_room"/>
                <col class="table_room"/><col class="table_read"/>
                <col class="table_read"/><col class="table_read"/>\n' +
              '</colgroup>' +
              '{table}' +
              '</table></body></html>',
            base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) },
            format = function(s, c) {
              return s.replace(/{(\w+)}/g,
                function(m, p) { return c[p]; })
          };
            //  这里是两种方式的区别之处 把页面转为base64码导出 name是工作表名称，可以为空
            let table;
            if (!tableId.nodeType) table = document.getElementById(tableId);
            let ctx = {worksheet: name || 'Worksheet', table: table.innerHTML};
       document.getElementById("download").href = uri + base64(format(template, ctx));
            document.getElementById("download").download = filename;
            document.getElementById("download").click();
        }
      },


        isIE() {
          if (!!window.ActiveXObject || "ActiveXObject" in window) {
            return true;
          } else {
            return false;
          }
        }

      },
    }
</script>

<style scoped>
  .title{
    font-size: 20px;
  }
  .company_name{
    font-size: 16px;
    height: 30px;
  }
  table{
    table-layout:fixed;
  }

  td{
    padding: 0 5px;
    border:1px solid #aaa;
    /*word-break:keep-all;*/
    /*white-space:nowrap;*/
    overflow:hidden;
    /*text-overflow:ellipsis;*/
  }
  thead td:last-child{}
  tbody td{
    height: 30px;
    font-size: 15px;
    border: 1px solid #000;
  }
  .ggg{
    word-break:keep-all;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .ccc{
    border: 0;
  }
  .ddd{
    border: 0;
    border-right: 1px solid #000;
  }
  .eee{
    border: 0;
    border-bottom: 1px solid #000;
  }
  .fff{
    border: 0;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
  }
  .table_head{
    font-size: 12px;
    height: 24px;
  }
  .table_room{
    width: 170px;
  }
  .table_read{
    width: 100px;
  }


</style>

 

 

摘抄自：https://blog.csdn.net/nihaoqiulinhe/article/details/53537540    

理解翻译

mso-number-format:"0"NO Decimals  没有小数位
mso-number-format:"0\.000" 3 Decimals  保留3位小数
mso-number-format:"\#\,\#\#0\.000"Comma with 3 dec  保留3位小数，并且长数字用逗号分隔
mso-number-format:"mm\/dd\/yy"Date7  日期  以下都是不同的日期格式展示
mso-number-format:"mmmm\ d\,\ yyyy"Date9
mso-number-format:"m\/d\/yy\ h\:mm\ AM\/PM"D -T AMPM
mso-number-format:"Short Date"01/03/1998
mso-number-format:"Medium Date"01-mar-98
mso-number-format:"d\-mmm\-yyyy"01-mar-1998
mso-number-format:"Short Time"5:16
mso-number-format:"Medium Time"5:16 am
mso-number-format:"Long Time"5:16:21:00
mso-number-format:"Percent"Percent - two decimals   百分数 两位小数
mso-number-format:"0%"Percent - no decimals  百分数  没有小数
mso-number-format:"0\.E+00"Scientific Notation   科学计数法
mso-number-format:"\@"  Text    作为文本输出   当前数值大的时候会变为科学计数法，用此转换
mso-number-format:"\#\ ???\/???"Fractions - up to 3 digits (312/943)  分数 最多三位数
mso-number-format:"\0022£\0022\#\,\#\#0\.00"£12.76 英镑
mso-number-format:"\#\,\#\#0\.00_ \;

Red

\-\#\,\#\#0\.00\ "

2 decimals, negative numbers in red and signed (1.56   -1.56)

2位小数，红色负号

  

 

页面效果图：

第一种方式导出Excel效果图：

 

第二种方式导出效果图：

 

可以看出两种方式展示效果基本一样，区别在于第一种方式的设置td宽度没有其作用

而共同之处在于给两种方式设置的溢出省略号处理都没有实现，全部失效。

希望解决的朋友留言告知，谢谢！！！

本文不妥之处请指正，接受意见，不接受批评！

 

 

 

 

 

 

 

 

 

 

 

 

Javacssjsp
关注
发票扫描识别，发票扫描仪
ocr92的博客
08-28 2877
一、行业背景 财务共享这个概念很早以前就被提出，只是在实际的推广过程中遇到了很多难题。比如我们今天谈到的发票录入问题。日常生活中，我们几乎每天都在和各种各样的发票打交道，出门打车要发票，吃饭完毕要发票，发票作为报销也好，消费记录也好，都是一种重要的凭据。 尤其是增值税发票，作为全国通用的票据来讲，其重要性不言而喻。一般情况常见的是每一张发票都需要录入到ERP系统当中，并且要做到三单匹配，最关键...
vue表格导出到Excel
热门推荐
宋文轩
10-27 1万+
步骤一：安装依赖 npm install --save xlsx file-saver 步骤二：在放置需要导出功能的组件中引入相关组件 import FileSaver from 'file-saver' import XLSX from 'xlsx' 步骤三：给table设置一个id HTML中的设置，简单来说就是给需要导出的table标签el-table上加一个id：如id="exportTable"，对应下面的exportExcel方法中的 document.querySelector(
invoice-builder:with使用vue.js的发票生成器
05-12
发票生成器-PWA-Vue js 与服务人员和vue js一起玩的小项目。
vue3项目中使用vxe-table的自定义打印方法实现打印发票功能
jieyucx的博客
05-20 1870
vxe-table官方文档，全局安装教程$print({sheetName: '打印自定义模板',content: `我是合同`});可以接受一个配置对象作为参数。这个配置对象可以包含以下属性：sheetName：打印的工作表名称。style：自定义的CSS样式。content：打印的内容。
vue纯前端使用exceljs导出excel文件手把手教程，非官方文档直粘
最新发布
Yy55gc25112的博客
08-06 3729
纯前端使用exceljs导出excel文件超详细教程，一文学会!
vue 记账清单
qq_64628470的博客
10-24 409
通过发送请求来从后台获取更改数据，需要用到钩子函数。在渲染函数中setOption动态更新饼图（map）使用ECharts来渲染饼图。
java excel导入_基于Excel和Java自动化工作流程：发票生成器示例
weixin_39904587的博客
11-30 201
对于销售人员，使用Excel创建发票是很常见的。但是该过程通常涉及许多容易出错的手动操作，例如输入数据，复制/粘贴等。如何实现一个可以将数据从数据库自动填充到发票Excel模板中，而无需再辛苦手动输入，从繁重的手动录入中解脱出来，并且避免认为错误这是每个人迫切的需求。虫虫一直奉行理念：真正的自动化是解决用户痛点问题，把繁重人工劳动释放出来。本文我们就介绍一个老外的利用Java编写自动化程序实现自动...
Vue2.0实现将页面中表格数据导出excel的实例
08-29
Vue2.0实现将页面中表格数据导出excel的实例 本篇文章主要介绍了Vue2.0实现将页面中表格数据导出excel的实例，非常具有实用价值，感兴趣的同学可以了解一下。 一、安装依赖 在实现将页面中表格数据导出excel的...
Vue实现导出excel表格功能
08-27
Vue实现导出Excel表格功能 本文主要介绍了如何使用Vue实现导出Excel表格的功能，并提供了相关的代码实现。 知识点1：Vue实现导出Excel表格的技术栈 在实现导出Excel表格功能时，我们需要使用以下技术栈： * Vue...
vue导出excel(Blob.js/Export2Excel.js).rar
05-27
本资源“vue导出excel(Blob.js/Export2Excel.js).rar”提供了实现这一功能的关键JavaScript库，Blob.js和Export2Excel.js。下面我们将深入探讨如何利用这些工具在Vue项目中实现出色的Excel导入和导出功能。 首先，...
详解如何在Vue项目中导出Excel
12-10
Excel 的导入导出都是依赖于js-xlsx来实现的。 在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据。 使用 由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader。 所以你先需要安装如下命令： ...
vue-invoice-app：使用Vue.js，Node.js，Express.js和MySQL构建的发票应用程序
02-05
发票应用 一种应用程序，旨在促进编写传统发票的过程。 跟踪发送的货物和提供的服务应该是计算机的工作。 统一语言 屏幕截图 产品特点 启用CRUD 产品展示 单据 提供者 跟踪整个应用程序中执行的操作 从PDF / Excel格式的文档生成发票 入门 git clone https://github.com/Andrei0872/invoice-app.git cd client/ && npm i && cd - && cd server/ && npm i && cd - cp server/.env.example server/.env # Then, add the informa
HTML发票票据,模板
03-29
随便写的HTML模板 HTML发票票据,模板 收款发票 收据
js-invoice-generator:疯狂JavaScript发票生成器（包括ReactJS，PhantomJS和NodeJS）
05-05
开始 $ npm install $ node run.js 重要说明：您应该安装 （请参阅： run.js:7 ）。 预习 发票设计但已使用和完全重写。
vue账单导出xlsx表格，多页签
qq_44599041的博客
03-02 204
vue账单导出xlsx表格，多页签
vue+node链接数据库_使用Vue和Node构建迷你发票应用程序：数据库和API
culiu9261的博客
07-21 692
vue+node链接数据库To get paid for goods and services provided, companies/freelancers need to send invoices to their customers informing them of the services that they will be charged for. Back then, people...
js打印出的商品发票单（不同地区、商品税）
小青蛙的博客
08-11 3012
1. 开发需求：   购物收据目标   编写程序以打印购物车的收据，包括销售税。 客户从美国不同的州购物，并根据地点和产品类别应用销售税。   销售 税= 综合（ 价格 * 数量 * 销售税率 ） 某些产品类别免征营业税（ 平均税率为0 ），销售税金额应向上舍入到最接近的0.05（ 例如1.13-&gt; 1.15,1.16-&gt; 1.20,1.151-&gt; 1.20 ） ...
js打印小票（用iframe实现）
qq_42972375的博客
10-17 1942
注意：js打印小票我知道的有俩种实现方式：iframe和window.open方式，因为window.open点击下载之后浏览器会自动新建网页，所以我用的是iframe 我用iframe的具体实现方式 应用场景点击详情页可看到交易数据然后点击打印小票 实现方式：iframe标签是在详情页A.jsp,然后新建B.jsp排版好小票内容再将所需要的数据从详情页A.jsp传到B.jsp A.jsp: function printdetails() { var url = "B.jsp?"+ "submchn
vue打印收据
qq_34631220的博客
07-19 1455
vue打印收据
Vue项目详述：Excel导出与js-xlsx实现
首先，导出Excel功能主要依赖JavaScript库js-xlsx，为了方便操作，通常会使用一个名为Export2Excel.js的封装库。这个库结合了js-xlsx、file-saver和script-loader，以便在Vue项目中更简洁地进行数据导出。 要使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值