Vue 使用vue-json-excel 实现导出Excel

https://blog.csdn.net/qq_42221334/article/details/99566915?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

npm install vue-json-excel; 安装

在main.js里引入
import JsonExcel from 'vue-json-excel';
Vue.component('downloadExcel',JsonExcel);
在要使用的组件里
<download-excel
        class="export-excel-wrapper"
        :data="json_data"
        :fields="json_fields"
        name="待发货导出.xls"
      >
        <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
 	<el-button type="primary" style="margin-left:20px;" size="small">导出EXCEL</el-button>
</download-excel>
data() {
    return {
      json_fields: {
        "头部-诊断名称": "name",    //常规字段
        "头部-联系电话": "phone.mobile", //支持嵌套属性
        "头部-损坏区域代码": {
          field: "phone.landline",
                    //自定义回调函数
          callback: value => {
            return `损坏区域代码 - ${value}`;
          }
        }
      },
      json_data: [
        {
          name: "损坏的组件一",
          city: "New York",
          country: "United States",
          birthdate: "1978-03-15",
          phone: {
            mobile: "1-541-754-3010",
            landline: "(541) 754-3010"
          }
        },
        {
          name: "损坏的组件二",
          city: "Athens",
          country: "Greece",
          birthdate: "1987-11-23",
          phone: {
            mobile: "+1 855 275 5071",
            landline: "(2741) 2621-244"
          }
        }
      ],
      json_meta: [
        [
          {
            " key ": " charset ",
            " value ": " utf- 8 "
          }
        ]
      ]
    };
  }

修改关于有些过长数值转换出错的问题 借鉴了https://www.cnblogs.com/Airon-wei/p/10942562.html
在jsonExcel里
将//Data
      xlsData += "<tbody>";
      data.map(function(item, index) {
        xlsData += "<tr>";
        for (let key in item) {
          xlsData += "<td>" + _self.valueReformattedForMultilines(item[key]) + "</td>";
        }
        xlsData += "</tr>";
      });
      xlsData += "</tbody>";
修改为
//Data
      xlsData += "<tbody>";
      data.map(function(item, index) {
        xlsData += "<tr>";
        for (let key in item) {
          xlsData += "<td style=\"mso-number-format:'\\@';\">" + _self.valueReformattedForMultilines(item[key]) + "</td>";
        }
        xlsData += "</tr>";
      });
      xlsData += "</tbody>";
就可以完美解决了