JSON to Excel for VUE 2

直接从浏览器下载 JSON 作为 excel 或 CSV 文件 es5 兼容版本. 原地址 https://github.com/jecovier/vue-json-excel

重要！Microsoft Excel 中的额外提示

此组件中实现的方法使用 HTML 表绘制.xls 文件，Microsoft Excel 不再将 HTML 识别为本机内容，因此在打开文件之前将显示警告消息。内容将被完美呈现，但警告消息无法避免

入门

下载包:

npm install vue-json-excelie

在 vue 应用程序入口点注册 JsonExcel:

import Vue from 'vue'
import JsonExcel from 'vue-json-excelie'

Vue.component('downloadExcel', JsonExcel)

模板

<download-excel :data="json_data">
  下载数据
  <img src="download_icon.png" />
</download-excel>

Props List

| 名称 | 类型 | 说明 | 默认值 | | :--------------------------- | :----------: | --------------------------------------------------------------------------------------------------------------------------------------------- | :------: | | data | Array | 要导出的数据。 | | fields | Object | JSON 对象中要导出的字段。如果没有提供，则将导出 JSON 中的所有属性。 | | export-fields (exportFields) | Object | 用于修复使用变量字段的其他组件（如 vee validate）的问题。exportFields 的工作原理与 fields 完全相同 | | type | string | Mime 类型 [xls, csv] | xls | | name | string | 要导出的文件名。 | data.xls | | header | string/Array | 数据的标题。可以是字符串（一个标题）或字符串数组（多个标题）。 | | title(deprecated) | string/Array | 与 header 相同，title 是为了追溯兼容性而维护的，但是由于与 HTML5 title 属性冲突，不建议使用它。 | | footer | string/Array | 数据的页脚。可以是字符串（一个页脚）或字符串数组（多个页脚）。 | | default-value (defaultValue) | string | 当行没有值时作为默认。 | '' | | worksheet | string | 工作表选项卡的名称。 | 'Sheet1' | | fetch | Function | 回调以在下载前获取数据，如果设置了它，它将在按下鼠标后和下载过程之前立即运行。重要提示：只有在未定义数据属性的情况下才有效。 | | before-generate | Function | 回调以在生成/获取数据之前调用方法，例如：show loading progress | | before-finish | Function | 下载前弹出一个回调函数，比如在下载前弹出一个回调函数 | | stringifyLongNum | Boolean | stringify long number and decimal(解决数字精度损失问题), 默认: false | | escapeCsv | Boolean | 这将转义 CSV 值，以便修复一些有关数字字段的 excel 问题。但这将用**="和"**包装每个 csv 数据，以避免您必须将此属性设置为 false。 默认: True |

Example

import Vue from 'vue'
import JsonExcel from 'vue-json-excelie'

Vue.component('downloadExcel', JsonExcel)

const app = new Vue({
  el: '#app',
  data: {
    json_fields: {
      'Complete name': 'name',
      City: 'city',
      Telephone: 'phone.mobile',
      'Telephone 2': {
        field: 'phone.landline',
        callback: (value) => {
          return `Landline Phone - ${value}`
        },
      },
    },
    json_data: [
      {
        name: 'Tony Peña',
        city: 'New York',
        country: 'United States',
        birthdate: '1978-03-15',
        phone: {
          mobile: '1-541-754-3010',
          landline: '(541) 754-3010',
        },
      },
      {
        name: 'Thessaloniki',
        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',
        },
      ],
    ],
  },
})

In your HTML call it like

<download-excel class="btn btn-default" :data="json_data" :fields="json_fields" worksheet="My Worksheet" name="filename.xls">
  下载 Excel (你可以用html代码来定制它！)
</download-excel>

必填

• json_data: 包含要导出的数据。
• json_fields: 您可以选择要导出的字段。指定嵌套数据并为字段指定标签。键是标签，值是 JSON 字段。这将按原样导出字段数据。如果需要自定义导出的数据，可以定义回调函数。

let json_fields = {
  // regular field (exported data 'as is')
  fieldLabel: attributeName, // nested attribute supported
  // callback function for data formatting
  anotherFieldLabel: {
    field: anotherAttributeName, // nested attribute supported
    callback: (value) => {
      return `formatted value ${value}`
    },
  },
}

json_fields 是一个表示要导出哪些列的对象。如果没有提供对象，组件将使用数据数组中的第一个对象提取键作为列名。Json 字段示例：

:export-fields="{
    'Human friendly name': '_name_field_from_json',
    'user's last name': '_last_name_text'
}"

Export CSV

要将 JSON 导出为 CSV 文件，只需添加属性"type"，值为"CSV"：

<download-excel class="btn btn-default" :data="json_data" :fields="json_fields" type="csv" name="filename.xls">
  下载 CSV (你可以用html代码来定制它)
</download-excel>

多行值将出现在单个单元格中

数据中包含换行符的单个文本值将在 Excel 中显示为单个单元格。这避免了多行值被拆分为多个单元格的不良行为，这些单元格必须在使用数据筛选器和透视表之前进行合并。

For example:

<template>
  <div>
    <json-excel :data="dataForExcel" />
  </div>
</template>
<script>
  import JsonExcel from '@/components/JsonExcel'

  export default {
    components: {
      JsonExcel,
    },
    data: () => {
      return {
        dataForExcel: [
          { colA: 'Hello', colB: 'World' },
          {
            colA: 'Multi-line',
            /* Multi-line value: */
            colB: 'This is a long paragraph\nwith multiple lines\nthat should show in a single cell.',
          },
          { colA: 'Another', colB: 'Regular cell' },
        ],
      }
    },
  }
</script>

按需获取数据

如果您需要从服务器获取数据，您可以使用 fetch，它允许您定义一个回调函数，当用户单击 download 按钮时将执行该回调函数。此函数必须返回包含要导出的数据的 JSON 值。基本用例是：

<template>
  <div id="app">

    <hr>
    <h2>Fetch Example</h2>
    <downloadexcel
      class            = "btn"
      :fetch           = "fetchData"
      :fields          = "json_fields"
      :before-generate = "startDownload"
      :before-finish   = "finishDownload">
      Download Excel
    </downloadexcel>
  </div>
</template>

<script>
import downloadexcel from "vue-json-excelie";
import axios from 'axios';

export default {
  name: "App",
  components: {
    downloadexcel,
  },
  data(){
    return {
      json_fields: {
        'Complete name': 'name',
        'Date': 'date',
      },
    }
  }, //data
  methods:{
    async fetchData(){
      const response = await axios.get('https://holidayapi.com/v1/holidays?key=a4b2083b-1577-4acd-9408-6e529996b129&country=US&year=2017&month=09');
      console.log(response);
      return response.data.holidays;
    },
    startDownload(){
        alert('show loading');
    },
    finishDownload(){
        alert('hide loading');
    }
  }
};
</script>

Using callbacks

在字段描述中使用回调函数时，有三个选项可用于检索数据：

• field: 'path.to.nested.property' 可以使用嵌套属性表示法检索特定值。

    json_fields: {
        'Complete name': 'name',
        'City': 'city',
        'Telephone': 'phone.mobile',
        'Telephone 2' : {
            field: 'phone.landline',
            callback: (value) => {
                return `Landline Phone - ${value}`;
            }
        },
    },

• field: 'define.nested.object' 也可以检索嵌套对象。

    json_fields: {s
        'Complete name': 'name',
        'City': 'city',
        'Telephone': 'phone.mobile',
        'Telephone 2' : {
            field: 'phone',
            callback: (value) => {
                return `Landline Phone - ${value.landline}`;
            }
        },
    },

• Or get the whole row 如果字段未定义。

    json_fields: {
        'Complete name': 'name',
        'City': 'city',
        'Telephone': 'phone.mobile',
        'Telephone 2' : {
            callback: (value) => {
                return `Landline Phone - ${value.phone.landline}`;
            }
        },
    },

License

MIT

Status

此版本为兼容 ie 的 es5 版本，详细内容请看原地址 https://github.com/jecovier/vue-json-excel