Introduction to the

  • This paper introduces the use of two download libraries: js-file-download 2. Filesaver.js both have their advantages and disadvantages.
  • The point of using a library is that the author of the library has already dealt with many issues such as compatibility. And the more people you use the library, the more guaranteed it is that there won’t be any weird problems.
  • Remember to look at the documentation.

js-file-download

introduce

  • Library is relatively small, the main file is less than 2k. The downside is that you can’t download directly from the URL.
  • No dependency, can be directly introduced into JS use.
  • Do partial compatibility.
  • This is done by creating a tag to download and then asynchronously deleting the TAG.
  • Accept four parametersdata, filename, mime, bom
    • dataNeed to download inside.
    • filenameNote that the name of the downloaded file must contain the file type, such as XLS and CSV
    • mime new BlobThe default isapplication/octet-stream
    • bomAppends to the beginning of the file.var blobData = (typeof bom ! == 'undefined') ? [bom, data] : [data]

The installation

npm install js-file-download --save
Copy the code

Use the sample

  • The readme.md is pretty straightforward.
  • One thing to noteresponseTypeIt doesn’t have to beblobMay also beArrayBuffer
import Axios from axios;
import fileDownload from 'js-file-download';

function download(url: string, filename: string) {
  Axios.get(url, {
    responseType: 'blob',
  }).then(res= > {
    fileDownload(res.data, filename);
  });
}

var fileDownload = require('js-file-download');
fileDownload(data, 'filename.csv');

or

// Bind fileDownload to the vUE global object
let res = await Api.exportData()
this.fileDownload(res, `xxxx.xlsx`)
Copy the code

FileSaver.js

introduce

  • Basically compatible with all browsers

  • supportBlob/File/UrlDownload in three formats. It is comprehensive, and the code to do a lot of compatibility processing.

The installation

npm install file-saver --save
Copy the code

Use the sample

  • Readme.md is introduced with examples, so be sure to check out the documentation.

The introduction ofsaveAs()function

import { saveAs } from 'file-saver';

FileSaver saveAs(Blob/File/Url, optional DOMString filename, optional Object { autoBom })
Copy the code
  • The saveAs function takes three arguments, the first of which indicates that it supports themBlob/File/UrlThree types of data, the second parameter representing the file name (optional) and the third parameter representing the configuration object (optional)
  • { autoBom: true}Automatically provides Unicode text encoding prompts (see:Byte order token)

Save the Blob as text

var blob = new Blob(["Hello, world!"] and {type: "text/plain; charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");
Copy the code

Download the file according to the URL

FileSaver.saveAs("https://httpbin.org/image"."image.jpg");
Copy the code

Save the Canvas Canvas as a file

var canvas = document.getElementById("my-canvas");
canvas.toBlob(function(blob) {
    saveAs(blob, "pretty image.png");
});
Copy the code

Save the file

  • You can save the File constructor without specifying a filename. If the file itself already contains a name, there are many ways to get the file instance (from storage, file input, new constructors, clipboard events). If you still want to change the name, you can change it in the second parameter.
// Note: Ie and Edge do not support the new File constructor,
// So construct blob and use saveAs(blob, filename)

var file = new File(["Hello, world!"]."hello world.txt", {type: "text/plain; charset=utf-8"});
FileSaver.saveAs(file);
Copy the code

Big guy this is a great article to readTalk about the 15.5K FileSaver. How does it work?.

This section is based on his articles, mostly from FileSaverREADME.mdThe document.