Vue json to excel - Word и Excel - помощь в работе с программами

JSON to Excel for VUE 2

Download your JSON data as an Excel file directly from the browser. This component is based on the solution proposed on this thread

Important! Extra prompt in Microsoft Excel

The method implemented in this component uses HTML tables to draw the .xls files, Microsoft Excel no longer recognize HTML as native content so a warning message will be displayed before opening the file. The content will be rendered perfectly but the message can’t be avoided.

Getting started

Get the package:

npm install vue-json-excel

import Vue from "vue";
import JsonExcel from "vue-json-excel";

Vue.component("downloadExcel", JsonExcel);

In your template

<download-excel :data="json_data">
  Download Data
  <img src="download_icon.png" />
</download-excel>

Props List

Name	Type	Description	Default
data	Array	Data to be exported.
fields	Object	Fields inside the JSON Object that you want to export. If none provided, all properties in the JSON will be exported.
export-fields (exportFields)	Object	Used to fix the problem with other components that use the variable fields, like vee-validate. exportFields works exactly like fields
type	string	Mime type [xls, csv]	xls
name	string	File name to export.	data.xls
header	string/Array	Title(s) for the data. Can be a string (one title) or an array of strings (multiple titles).
title(deprecated)	string/Array	same as header, title is maintained for retro-compatibility purposes but its use is not recommended due to the conflict with the HTML5 title attribute.
footer	string/Array	Footer(s) for the data. Can be a string (one footer) or an array of strings (multiple footers).
default-value (defaultValue)	string	Use as fallback when the row has no field values.	»
worksheet	string	Name of the worksheet tab.	‘Sheet1’
fetch	Function	Callback to fetch data before download, if it’s set it runs immediately after mouse pressed and before download process. IMPORTANT: only works if no data prop is defined.
before-generate	Function	Callback to call a method right before the generate / fetch data, eg:show loading progress
before-finish	Function	Callback to call a method right before the download box pops out, eg:hide loading progress
stringifyLongNum	Boolean	stringify long number and decimal(solve the problem of loss of digital accuracy), default: false
escapeCsv	Boolean	This escapes CSV values in order to fix some excel problems with number fields. But this will wrap every csv data with =» and «, to avoid that you have to set this prop to false. default: True

Example

import Vue from "vue";
import JsonExcel from "vue-json-excel";

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"
>
  Download Excel (you can customize this with html code!)
</download-excel>

REQUIRED

json_data: Contains the data you want to export.
json_fields: You can select what fields to export. Specify nested data and assign labels to the fields. The key is the label, the value is the JSON field. This will export the field data ‘as is’. If you need to customize the the exported data you can define a callback function. Thanks to @gucastiliao.

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 is a object that represents which columns will be exported. If no object is provided, the component will be use the first object in your data array to extract the keys as columns names. Json field example:

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

Export CSV

To export JSON as a CSV file, just add the prop type with a value of «csv»:

<download-excel
  class="btn btn-default"
  :data="json_data"
  :fields="json_fields"
  type="csv"
  name="filename.xls"
>
  Download CSV (you can customize this with html code!)
</download-excel>

Multi-line values will appear in a single cell

A single text value in the data that contains newline characters will appear as a single cell in Excel. This avoids the undesired behavior of multi-line values getting split into multiple cells that must be merged before using data filters and pivot tables.

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 paragraphnwith multiple linesnthat should show in a single cell.",
          },
          { colA: "Another", colB: "Regular cell" },
        ],
      };
    },
  };
</script>

Fetch Data on Demand

In case you need to fetch data from the server, you could use the fetch prop that allows you to define a callback function that is executed when your user click the download button. This function has to return a JSON value containing the data to export. A basic use case is:

<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-excel";
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

when using callback functions in the fields description, you have three option to retrieve data:

field: ‘path.to.nested.property’ you can retrieve a specific value using the nested property notation.

    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’ you can retrieve a nested object too.

    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 if field is undefined.

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

License

MIT

Status

This project is in an early stage of development. Any contribution is welcome

Источник

JSON to Excel for VUE 2

Download your JSON data as an Excel file directly from the browser. This component is based on the solution proposed on this thread

Important! Extra prompt in Microsoft Excel

Getting started

Get the package:

npm install vue-json-excel

import Vue from 'vue';
import JsonExcel from 'vue-json-excel';

Vue.component('downloadExcel', JsonExcel);

In your template

Download Data
«>

<download-excel :data="json_data">
  Download Data
  <img src="download_icon.png" />
download-excel>

Props List

Name	Type	Description	Default
data	Array	Data to be exported.
fields	Object	Fields inside the JSON Object that you want to export. If none provided, all properties in the JSON will be exported.
export-fields (exportFields)	Object	Used to fix the problem with other components that use the variable fields, like vee-validate. exportFields works exactly like fields
type	string	Mime type [xls, csv]	xls
name	string	File name to export.	data.xls
header	string/Array	Title(s) for the data. Can be a string (one title) or an array of strings (multiple titles).
title(deprecated)	string/Array	same as header, title is maintained for retro-compatibility purposes but its use is not recommended due to the conflict with the HTML5 title attribute.
footer	string/Array	Footer(s) for the data. Can be a string (one footer) or an array of strings (multiple footers).
default-value (defaultValue)	string	Use as fallback when the row has no field values.	»
worksheet	string	Name of the worksheet tab.	‘Sheet1’
fetch	Function	Callback to fetch data before download, if it’s set it runs immediately after mouse pressed and before download process. IMPORTANT: only works if no data prop is defined.
before-generate	Function	Callback to call a method right before the generate / fetch data, eg:show loading progress
before-finish	Function	Callback to call a method right before the download box pops out, eg:hide loading progress
stringifyLongNum	Boolean	stringify long number and decimal(solve the problem of loss of digital accuracy), default: false

Example

import Vue from 'vue';
import JsonExcel from 'vue-json-excel';

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 (you can customize this with html code!) «>

<download-excel
  class="btn btn-default"
  :data="json_data"
  :fields="json_fields"
  worksheet="My Worksheet"
  name="filename.xls"
>
  Download Excel (you can customize this with html code!)
download-excel>

REQUIRED

json_data: Contains the data you want to export.
json_fields: You can select what fields to export. Specify nested data and assign labels to the fields. The key is the label, the value is the JSON field. This will export the field data ‘as is’. If you need to customize the the exported data you can define a callback function. Thanks to @gucastiliao.

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}`;
    },
  },
};

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

Export CSV

To export JSON as a CSV file, just add the prop type with a value of «csv»:

Download CSV (you can customize this with html code!) «>

<download-excel
  class="btn btn-default"
  :data="json_data"
  :fields="json_fields"
  type="csv"
  name="filename.xls"
>
  Download CSV (you can customize this with html code!)
download-excel>

Multi-line values will appear in a single cell

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 paragraphnwith multiple linesnthat should show in a single cell.',
          },
          { colA: 'Another', colB: 'Regular cell' },
        ],
      };
    },
  };
script>

Fetch Data on Demand

Fetch Example

Download Excel

«>

<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-excel";
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

when using callback functions in the fields description, you have three option to retrieve data:

field: ‘path.to.nested.property’ you can retrieve a specific value using the nested property notation.

    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’ you can retrieve a nested object too.

    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 if field is undefined.

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

License

MIT

Status

Forked from jecovier/vue-json-excel, but the repo didn’t seem to be maintained, which is the reason this scoped and enhanced package is being published..

Источник

First, technology selection

1. Use vuE-JSON-Excel plug-in

Advantages: simple and convenient, easy to use, out of the box;

Disadvantages: Does not support Excel table style setting, and supports a single function;

Xlsx-style implementation based on SheetJs-XLSX parser (recommended)

Advantages: Support many formats, support excel table style setting, powerful function, high controllability, can read and export Excel;

Disadvantages: complex to use, high cost to get started, and advanced functions need to charge, but this function can be achieved by xLSX-style;

Two, technical implementation

Use vuE-JSON-Excel plug-in to achieve

1. Install the vuE-jSON-Excel dependency

npm install -S vue-json-excel
Copy the code

2. Register the plug-in to the Vue instance

import Vue from "vue";
import JsonExcel from "vue-json-excel";

Vue.component("downloadExcel", JsonExcel);
Copy the code

3. Usage

Wrap the Download-Excel component in the outgoing package that needs to trigger the export event

The attributes supported by this component can be found in the VuE-jSON-Excel Github documentation

download-excel :data="json_data"
  Download Data
  img src="download_icon.png" /
/download-excel
Copy the code

First, you need to deal with the data content exported to excel files, which are the following data:

Header name data JSON_fields: You can select the fields to export and assign labels to the fields. The data type is Object, key corresponds to a label, and value corresponds to a JSON field. The data in the same field as the data list is exported. If you need to customize the exported data, you can define the callback function.
Table data JSON_data: The data type is Array and stores the data to be exported.

let json_fields = {
  // fieldLabel(header name), attributeName(corresponding field name)
  fieldLabel: attributeName,
  // Use callback to customize export data
  anotherFieldLabel: {
    field: anotherAttributeName,
    callback: (value) =  {
      return `formatted value ${value}`; ,}}};let json_data = [
    {
        attributeName: value1,
        anotherAttributeName: value2
    },
    {
        attributeName: value3,
        anotherAttributeName: value4
    }
];
Copy the code

After processing the data, you can pass it into the Download-Excel component, which has no style, just set the style of the elements wrapped inside.

download-excel
  class="btn btn-default"
  :data="json_data"
  :fields="json_fields"
  worksheet="My Worksheet"
  name="filename.xls"

  Download Excel (you can customize this with html code!)
/download-excel
Copy the code

However, in actual business scenarios, the export of table data is usually all the data of the table, so in the export process, the request interface needs to be called to obtain all the data in the table, and the call interface to obtain the data is performed asynchronously. This plug-in also provides a solution for this scenario.

Related cases:

template
    div id="app"
        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-excel";
import axios from 'axios';

export default {
    name: "App".components: {
        downloadexcel,
    },
    data(){
        return {
            json_fields: {
                'Complete name': 'name'.'Date': 'date',}}},

Implementation of XLSX-style based on SheetJS-XLSX Parser (Recommended)

Since this part involves a lot of content, it will be encapsulated later if necessary

This section only describes the use of encapsulated export2Excel, not the principle.

The plug-in not only supports excel file export, but also supports file import function, and excel file export not only supports JSON data, but also supports table export.

Because sheetjS-XLSX provides advanced tools for paid items such as table style modifications, the Sheetjs-XLSX implementation of the XLSX-style plugin was selected.

Compatibility:

1. Install dependencies

npm install -S xlsx
npm install -S xlsx-style
Copy the code

The xlsx-style plugin will cause an error when used. The official solution is to add the following code to the vue.config.js configuration file in the root directory:

module.exports = {
	configureWebpack: {
    	externals: {
      		'./cptable': 'var cptable'}}}Copy the code

Another option is to change the source code, but it is not recommended, so I will not explain.

2. Usage

The method of exporting Excel files is encapsulated here. There are two schemes to realize the function of file download, which are as follows:

The URL. CreateObjectURL method is used to generate the download link through the file download function of a tag. (Method used in this paper)
Download files through the third-party plug-in file-saver.

Js-xlsx plug-in comes with related functions to facilitate the conversion of different data formats:

aoa_to_sheet converts an array of arrays of JS data to a worksheet.
json_to_sheet converts an array of JS objects to a worksheet.
table_to_sheet converts a DOM TABLE element to a worksheet.
sheet_add_aoa adds an array of arrays of JS data to an existing worksheet.
sheet_add_json adds an array of JS objects to an existing worksheet.

Here is the code for the wrapped export2Excel function. You just need to copy the code to the created export2Excel file:

/**
 * create by lwj
 * @file Export export plug-in package */

import * as styleXLSX from 'xlsx-style'

Several issues need to be noted:

The default export function name of XLSX and xlsx-style is XLSX. If you import them at the same time, you need to set the alias to avoid function overwriting problems.
If you don’t want to use the XLSX plug-in, you can also use the xLSX-style plug-in to convert the exported data into the Worksheet format. The principle is to convert the exported data into the worksheet format. For details, see jS-XLSX documentation. (You can try to do it yourself)

Then, you only need to call it where you need to export Excel. If you need to export the table style, you can learn how to configure the table style. The specific configuration method can be viewed in the XLSX-style document.

If the data is exported using JSON, the header name and field need to be mapped.

Related cases:


import XLSX from 'xlsx';
import export2Excel from '@/assets/utils/export2Excel';

Iii. Reference materials

Vue-json-excel plug-in document
Sheetjs — XLSX tool library
XLSX — style tool library

Источник

Introduction:

Excel is frequently used for financial analysis and data organization. Businesses of all sizes and in all business operations use it.

This article explains how to use VueJS to produce an excel sheet from JSON data. We begin from scratch by installing VueJS in order to read the spreadsheet file.

Prerequisites:

Make sure npm is installed on your machine before beginning this step. To locate and set up the necessary dependencies for our application, we’ll utilize npm. Code editors are also necessary. Visual Studio Code is used throughout the whole course.

Get Started:

Step 1:

Configure your system with Vue CLI. The new package may be installed using the instructions shown below. To launch them, you must have administrator privileges unless npm was set up on your machine using Node.js version management (e.g. n or nvm).

npm install -g @vue/cli

Your command line will have access to the Vue binary after installation. Run Vue to verify that it was installed properly. A help message detailing all the possible commands should then appear.

You may check that you are running the right version with this command:

vue --version

Step 2:

Create a new project by running this command.

vue create generate-excel

Step 3:

Install XLSX package using this command.

npm i xlsx

Step 4:

Import XLSX into your HelloWorld.vue file.

import * as XLSX from "xlsx";

Step 5:

Add the generate button in your HTML.

<button v-on:click="generateExcelFile()">Generate Excel</button>

Step 6:

Add the sample data object.

sampleData: [
        {
          id: 1,
          name: "test1"
        },
        {
          id: 2,
          name: "test2"
        },
        {
          id: 3,
          name: "test3"
        },
]

Step 7:

Add the generateExcelFile() in method section.

generateExcelFile() {
      const ws = XLSX.utils.json_to_sheet(this.sampleData);  
      const wb = XLSX.utils.book_new();  
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');  
      XLSX.writeFile(wb, 'sample.xlsx');  
}

Finally, run the project by

npm run serve

Источник