An article explains in detail how to use file stream to download csv files in js

This article brings you relevant knowledge about js csv. It mainly introduces what a Blob object is, how to understand it and how to use file streams to download csv files. For those who are interested, let’s take a look. Well, I hope it helps everyone.

How to implement js to download csv files using file stream

Understanding Blob objects

Before the emergence of the Blob object, there was no better way to handle binary files in JavaScript. Since the emergence of Blob, we can use it to manipulate binary data.

Now we begin to understand the Bolb object and its file stream download application scenarios. Without further ado, let’s take a look at the detailed introduction

• Creation The Blob object is as follows:

var blob = new Blob(dataArray, options);

dataArray: It is an array that contains the data to be added to the Blob object. Arrays can be binary objects or strings.

options are optional object parameters used to set the MIME type of the data in the array.

• Create a Blob object of a DOMString object. The following code:

 var str = "<div>Hello World</div>";
 var blob = new Blob([str], {type: &#39;text/xml&#39;});
 console.log(blob); // 输出：Blob {size: 22, type: "text/xml"}

• Understand the URL.createObjectURL object

The URL object of the window object is used to convert blob or file is read into a url.

 window.URL.createObjectURL(file / blob);

For example, I now combine the above blob object to generate a simple demo column of a URL as shown below:

    var str = "<div>Hello World</div>";
    var blob = new Blob([str], {type: &#39;.csv, application/vnd.openxmlformats-        officedocument.spreadsheetml.sheet, application/vnd.ms-excel&#39;});
    console.log(blob);
    const url3 = window.URL.createObjectURL(blob);
    console.log(url3);

The first printed blob variable value in the above code is as follows:

  Blob {size: 22, type: ".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"}

Print the second url3 variable value information as follows:

blob:null/2c75a56e-0104-4572-bc19-391d3bf93d9d

• Understand the download attribute of the a tag in HTML5

Give a in HTMl5 The tag has a new download attribute. As long as we set the attribute value, the browser will not open a new link when clicking the link, but will directly download the file, and the file name will be the download attribute value.

So combined with this feature, we can simply implement file streaming to download files. We first dynamically create an a link based on the original code, and then set the style of the a tag to none. The href attribute of the link is the URL generated by window.URL.createObjectURL (blob); above, and then we set the download attribute of the link a. The attribute value is the file name of our download file. Finally, trigger the click function to download. The following code:

        var str = "<div>Hello World</div>";
        var blob = new Blob([str], {type: &#39;.csv, application/vnd.openxmlformats-        officedocument.spreadsheetml.sheet, application/vnd.ms-excel&#39;});
        console.log(blob);
        const url3 = window.URL.createObjectURL(blob);
        console.log(url3);
        var filename = &#39;文件流下载&#39; + &#39;.csv&#39;;
        const link = document.createElement(&#39;a&#39;);
        link.style.display = &#39;none&#39;;
        link.href = url3;
        link.setAttribute(&#39;download&#39;, filename);
        document.body.appendChild(link);
        link.click();

Recommended learning: "JavaScript Video Tutorial"

The above is the detailed content of An article explains in detail how to use file stream to download csv files in js. For more information, please follow other related articles on the PHP Chinese website!