Solve the problem that the file type is unrecognized or invalid when downloading files on H5 mobile terminal

A few days ago to do the function of H5 move the download file, download the excel, with the most common method of download, asynchronous request file download link, dynamically create a label to download, in normal PC performance, in the mobile terminal has been prompt illegal links, illegal file, unable to identify the file type, etc., both android and IOS, This was eventually resolved by changing the content-Type of the response header.

The front-end code

/** * very common web page download file code */
const downloadFile = async function () {
  const { data } = await Axios('/api/download/file/1000')
  const url = data.url
  const downloadlink = document.createElement('a')
  documentLink.href = url
  downloadlink.download = 'Today's data.xlsx'
  downloadlink.style.display = 'none'
  downloadlink.click()  
}
Copy the code

The back-end code

The content-type of the interface response header for the original backend request file stream is application/vnd.ms-excel, which is the default suffix for the.xls file, while the real suffix is.xlsx. There is not much difference between the two files. However, the mobile terminal is more strict, the suffix and MIME type must match, otherwise the message will be unable to recognize the file

Office mime types in various formats

Will the value of the content-type modified into application/VND. Openxmlformats – officedocument. Spreadsheetml. Sheet after each mobile browser can download properly, the iphone because of the particularity of itself, You can only preview the file and only change the suffix of the file stream. Some Android files can be used, but IOS is more strict, you must change the content-Type

The safari browser that handles IphoneXR displays Chinese file names with garbled characters

On safari of iPhone XR, if you click download, the download box will pop up, and the Chinese part of the file name will be garbled. Currently, this problem is only found in Safari of iPhone XR. Similarly, this problem is solved by setting the response header at the back end

The following code

public class DownloadServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // codes..
        String name = "Test file with Chinese name with space. TXT";
        String userAgent = request.getHeader("User-Agent");
        byte[] bytes = userAgent.contains("MSIE")? name.getBytes() : name.getBytes("UTF-8"); GetBytes (" utF-8 ") Handles safari garbled characters
        name = new String(bytes, "ISO-8859-1"); // All browsers support ISO coding
        response.setHeader("Content-disposition", String.format("attachment; filename=\"%s\"", name)); // Double quotes around file names handle whitespace truncation in Firefox
        // codes..}} This code deals with the problem of garbled characters when different browsers parse Chinese file names and the problem of whitespace truncation in Firefox. It has been tested in IE9, Chrome, Opera, Safari and Firefox.Copy the code

The above code links in this compatible file download solution for all browsers when Chinese name garble