Ajax 将 HTML中table 转换成Excel并下载。以及数据过大，下载报错的处理方法

最新推荐文章于 2024-09-10 14:15:01 发布

zq爱生活爱代码

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量362

点赞数

分类专栏： Vue JQuery

本文链接：https://blog.csdn.net/m0_37879526/article/details/103782114

版权

Vue 同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

JQuery

11 篇文章 0 订阅

订阅专栏

第一种方法

vue HTML 显示

<div ref="table">
        <el-table :data="showdata" style="width: 100%;height:50%;" height="700px">
        <el-table-column align="center" label="Wafer" width="70" prop="WAFERNO"></el-table-column>
        <el-table-column align="center" label="No." width="50" prop="WAFERSLOTNO"></el-table-column>
        <el-table-column align="center" label="Item" width="170" prop="SPECNAME"></el-table-column>
        <el-table-column
          v-for="(item,index) in dynamicColumns"
          :key="index"
          align="center"
          :label="item.name"
          width="130">
                <el-table-column :label="item.value" align="center" width="130">
                    <template slot-scope="scope">
                        <span :class="{red:!((toNonExponential(scope.row[item.name])<=toNonExponential(scope.row.SPECHIGH))&&(toNonExponential(scope.row[item.name])>=toNonExponential(scope.row.SPECLOW)))}" >{{scope.row[item.name]}}</span>
                    </template>
                </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="SPECHIGH" width="125" >
            <template slot-scope="scope">
            {{scope.row.SPECHIGH}}
            </template>
        </el-table-column>
        <el-table-column align="center" label="SPECLOW" width="125" >
            <template slot-scope="scope">
            {{scope.row.SPECLOW}}
            </template>
        </el-table-column>
      </el-table>
    </div>
    <a ref="dlink" style="display: none;"></a>

JS 方法

down2:function()
    {
            let _this=this;
      let style = 'String';
      let uri = "data:application/vnd.ms-excel;base64,";
      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><!--[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]-->" +
        "</head><body>{table}</body></html>";
      let dlink=this.$refs.dlink
      let table=this.$refs.table
      let ctx = {worksheet: 'Worksheet', table: table.innerHTML};

      let blob = new Blob([format(template, ctx)]);
      dlink.href = URL.createObjectURL(blob);//解决由于数据量太大导致chrome导出出现网络错误（由于url长度限制）
      //dlink.href = uri + base64(format(template, ctx));
      dlink.download =_this.recipeselectvalue+'_'+_this.lotid+'.xls';
      dlink.click();
    }

第二种 A标签自己创建（还没试过）

    var tableToExcel = function(table, fileName) { 
        var uri = 'data:application/vnd.ms-excel;base64,' 
            ,fileName = fileName || 'excelexport' 
        , 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 name="renderer" content="webkit"><!--[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]--></head><body><table>{table}</table></body></html>'; 
        var ctx = {worksheet:'Worksheet', table: table}; 
        var a = document.createElement('a'); 
        document.body.appendChild(a); 
        a.hreflang = 'zh'; 
        a.charset = 'utf8'; 
        a.type="application/vnd.ms-excel"; 
        
        let blob = new Blob([format(template, ctx)]);
        a.href = URL.createObjectURL(blob);//解决由于数据量太大导致chrome导出出现网络错误（由于url长度限制）
//        a.href = uri + Base64.encode(format(template,ctx)); 
        a.target = '_blank'; 
        a.download = fileName + '.xls';
        a.tableBorder = 1;
        a.click(); 
 
    };