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