Four methods for Vue to implement data import (resource, Axios, Fetch, Excel import)

Vue is a very popular JavaScript framework that provides a set of tools and libraries for building user interfaces. In Vue, we can import data in a variety of ways, including getting data from the server, getting data from local storage, reading data from files, etc. Among them, Excel import is a very common way of importing data, which can help us import large amounts of data quickly and accurately. This article will introduce how to import data and import Excel in Vue.

Data import

In Vue, we can use a variety of ways to import data, including using HTTP libraries such as Vue-resource, Axios, Fetch and other HTTP libraries, using LocalStorage or Cookies to obtain data from local storage, using Web Sockets to obtain data from server in real time, etc. The following are the methods of using these methods.

Import data using Vue-resource

Vue-resource is an officially recommended HTTP library, which can help us get data from the server. The steps to import data using Vue-resource are as follows:

Install Vue-resource in Vue project:

npm install vue-resource --save

Introduce Vue-resource in Vue project and register it as a Vue plugin:

import VueResource from 'vue-resource';
(VueResource);

Use Vue-resource in Vue component to send HTTP requests and get data:

this.$('/api/users').then(response => {
   = ;
});

Import data using Axios

Axios is a popular JavaScript HTTP library that can be used in browsers and in the browser. The steps to import data using Axios are as follows:

Install Axios in Vue project:

npm install axios --save

Introducing Axios in Vue components:

import axios from 'axios';

Use Axios in Vue component to send HTTP requests and get data:

('/api/users').then(response => {
   = ;
});

Import data using Fetch

Fetch is one of JavaScript's native APIs that help us get data from the server. The steps to import data using Fetch are as follows:

Send HTTP requests and get data using Fetch in Vue component:

fetch('/api/users')
  .then(response => ())
  .then(data => {
     = data;
  });

Excel import

In business, we usually need to import data from Excel files and display it on a page or store it in a database. In Vue, we can use a variety of libraries to read Excel files, including SheetJS, xlsx, etc. The following are the methods of using these libraries.

Read Excel files using SheetJS

SheetJS is a popular JavaScript library that helps us read and write Excel files. The steps to read Excel files using SheetJS are as follows:

Install SheetJS in Vue project:

npm install xlsx --save

Introducing SheetJS in Vue components:

import XLSX from 'xlsx';

Read Excel files using SheetJS in Vue components:

const file = [0];
const reader = new FileReader();
 = event => {
  const data = new Uint8Array();
  const workbook = (data, { type: 'array' });
  const sheetName = [0];
  const worksheet = [sheetName];
  const json = .sheet_to_json(worksheet, { header: 1 });
   = json;
};
(file);

Read Excel file using xlsx

xlsx is another popular JavaScript library that helps us read and write Excel files. The steps to read Excel files using xlsx are as follows:

Install xlsx in Vue project:

npm install xlsx --save

Introduce xlsx in Vue components:

import * as XLSX from 'xlsx';

Read Excel files using xlsx in Vue component:

const file = [0];
const reader = new FileReader();
 = event => {
  const data = new Uint8Array();
  const workbook = (data, { type: 'array' });
  const sheetName = [0];
  const worksheet = [sheetName];
  const json = .sheet_to_json(worksheet, { header: 1 });
   = json;
};
(file);

Save Excel file using

is a JavaScript library that helps us save data as files. In Vue, we can save data as an Excel file using. The steps to save an Excel file using are as follows:

Install in Vue project:

npm install file-saver --save

Introduced in Vue components:

import { saveAs } from 'file-saver';

Use in Vue components to save data as an Excel file:

const worksheet = .json_to_sheet();
const workbook = .book_new();
.book_append_sheet(workbook, worksheet, 'Sheet1');
const file = (workbook, { type: 'binary' });
const blob = new Blob([this.s2ab(file)], { type: 'application/octet-stream' });
saveAs(blob, '');

in conclusion

In Vue, we can use a variety of ways to import data, including getting data from server, getting data from local storage, reading data from files, etc. Excel import is a very common way of importing data, which can help us import large amounts of data quickly and accurately. In Vue, we can use a variety of libraries to read Excel files, including SheetJS, xlsx, etc. By using these libraries, we can quickly and conveniently implement data import and Excel import functions.

This is the article about the four methods of Vue to implement data import (resource, Axios, Fetch, Excel import). For more related Vue data import content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!