Web side JS export CSV file (using a tag) __js

Preface

Export the file, using the most ways or the server side to process. For example, the way in which JSP uses response.

However, sometimes you might want to use the Web front-end to export content from the page as well. For example, a table that exports a page.

There must be an answer to this requirement, but it will be slightly different for each browser to handle. (mainly the difference between IE and other browsers).

Using ActiveXObject in IE, you can use a tag (or JS) in Firefox and Chrome to implement it. This is mainly about implementations in other browsers.

using a Label implementation method

Directly on Example:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
Explain:

1. Download sets the file name of the download.

2. href plus data:text/txt;charset=utf-8 respectively set click link is the download file, encoding is utf-8. This comma is followed by what is saved in the file.


export CSV files with multiple rows and columns

CSV files can be opened in Excel, if you export a table, the use of Excel is much more convenient.

The question is: How to Branch, breakdown.

In theory: divided use, Number Division, branch use \ n.

You can use the above method to find that columns can be separated, but not wrapped. You don't seem to know \ nthe.

The solution is to use encodeuricomponent to encode/


  
 


CSV export with Chinese problems

All of the above are utf-8 coding, theoretically exporting Chinese should not be a problem.

However, if you export CSV format, using Excel to open it will find that Chinese is garbled, but it is normal to open with other text programs.

The reason is missing a BOM header. \ufeff.

Plus, everything's fine.


 

 
There are two changes here.

1. The charset of the page should be set to gb2312

2. Add \ufeff BOM Header




the file name of the chrome download


Use the download attribute of a above to specify the file name and suffix of the download. But when Chrome does, it turns out that chrome is ignoring this.

The download name is "Download" or "Download".

Online search, there is said to be a chrome bug.

See the two articles in StackOverflow:

Http://stackoverflow.com/questions/23962284/download-attribute-on-a-tag-doesnt-work-in-chrome
http://stackoverflow.com/questions/23816005/anchor-tag-download-attribute-not-working-bug-in-chrome-35-0-1916-114

The above two articles can not be concerned about, it is necessary to focus on whether the problem can be solved, and the solution is what.

Direct Sticking solution:


							 var blob = new BLOB ([data], {type: ' Text/csv '}); New Way
							 var csvurl = Url.createobjecturl (BLOB);
							 
 

Use BLOBs and URLs to encapsulate and convert. Solve the problem.

 

In case of Chinese problem, it is the same as the way it is handled:


1. The charset of the page needs to be set to gb2312 (set as UTF-8 also can)
2. Add \ufeff BOM Header

The specific code is similar:


data = "\ufeff" +data;
var blob = new BLOB ([data], {type: ' Text/csv,charset=utf-8 '});