当前位置: 首页 > 工具软件 > icon sheet > 使用案例 >

前端下载sheetjs处理\n \r 实现换行

殷浩慨
2023-12-01

sheetjs官网https://docs.sheetjs.com/docs/

第一种方案 如果在标签里面加

vue scope 会在
标签里面加版本号(编译的时候加版本号)下载下来不分行

// let nodeBr = document.createElement("br")
  // let dataV = document.getElementById("exportTable").attributes[0].name;
  // nodeBr.setAttribute(dataV, "");

第二种方案

// 把需要换行的改为<br/>
// 不需要处理版本号
if (String(num).indexOf('#@#') !== -1) {
        return String(num).replaceAll('#@#', '<br/>');
      } else {
        return num
      }

前端下载代码

// props table (id) name(下载下来excel格式)

<template>
  <el-button
             type="success"
             size="mini"
             icon="el-icon-upload" @click="exportEvent">导出</el-button>
</template>

<script>
import FileSaver from "file-saver";
import * as XLSX from 'xlsx'
import {omit, handelNewWs} from "../../../utils/data";

export default {
  name: "DERIVE.vue",
  data() {
    return {
      ws:'',
      grid:'',
    };
  },
  //需要的参数
  props: {
    id: {
      type: String,
      default: "Table",
    },
    name: {
      type: String,
      default: "Table",
    },
  },
  methods: {
    wsHandel() {
      this.grid = XLSX.utils.table_to_book(
          document.querySelector("#" + this.id),
      );
      this.ws = this.grid.Sheets["Sheet1"];
      let gatherData = {raw: true};
      let grid1 = XLSX.utils.table_to_book(
          document.querySelector("#" + this.id),
          gatherData
      );
      let ws1 = grid1.Sheets["Sheet1"];
      const newWs1=omit(ws1,'!rows','!cols','!fullref','!ref')  // 取出表格对象中用不到的
      const handelNewWsArr = handelNewWs(newWs1)  //对象变数组
      const reg= /[!~@#$&><=]+/gi  // 验证里面是否含有~@#$&
      const  that =this
      handelNewWsArr.forEach(item => {
        const v =item['v']  // 表格值
        const vKey=item['key'] //表格A1 A2
        if(v){
          // 处理%
          if( v.indexOf('%')!=-1){
            if(!reg.test(v) ){
              if(v.indexOf('.')!=-1){  // 处理%有小数点
                this.ws[vKey].z = "0.00%"; //  format the cell
                delete this.ws[vKey].w;
                XLSX.utils.format_cell(that.ws[vKey]); // refresh cell
              }else{  // 处理%没有小数点
                this.ws[vKey].z = "0%"; //  format the cell
                delete this.ws[vKey].w;
                XLSX.utils.format_cell(that.ws[vKey]); // refresh cell
              }
            }
          }else{
            if(parseFloat(v)!='NAN'){
              if(v.indexOf('.')!=-1){
                this.ws[vKey].z = "0.00"; //  format the cell
                delete this.ws[vKey].w;
                XLSX.utils.format_cell(that.ws[vKey]); // refresh cell
              }else{
                this.ws[vKey].z = "0"; //  format the cell
                delete this.ws[vKey].w;
                XLSX.utils.format_cell(that.ws[vKey]);
              }
            }
          }
        }
      })
    },
    // 导出Excel表格事件
    exportEvent() {
      const that=this
      this.wsHandel()
      let workbook = XLSX.write(this.grid, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
            new Blob([workbook], {
              type: "application/octet-stream;charset=utf-8",
            }),
            that.name + ".xlsx",
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, workbook);
      }
      return workbook;
    },

  }
}
</script>

<style scoped>

</style>

 类似资料: