Nail H5 micro application downloads files in IOS

The latest project is nailed H5 micro application. This project is an HR system project born on PC. there are processes such as resignation, leave and employment confirmation. When the resignation process is initiated, attachments need to be uploaded. Attachments can be uploaded to excel, word, pdf and pictures. After these files are uploaded, El upload is used in PC components, Click the file name echoed after uploading to download it and view it. However, it is not so easy to view or download the file when these processes are approved by the mobile terminal.

The first is Android

In the mobile terminal code, according to the path returned by the back end, directly use window.location.origin to splice the path, and then use

const url = window.location.origin + path
window.location.href = url perhaps
window.open(url)

There is no compatibility problem on the Android end, so you can directly jump to the default browser and ask whether you downloaded it

Then IOS

1. The above Android writing method is in ios. It will preview by default (the preview is not impossible. The main pdf preview files are garbled, so I want to jump to download, and there is no need to modify the back end). ios can't jump to download. Then I wonder if there is a compatibility problem, or if I can jump to the browser to download with a tag, and then I write a tag on the page, Add the download attribute to the a tag.

<a href="url" download="download Promise.pdf">Click download</a>
// The download attribute value is the name of the downloaded file
// The compatibility of this method is not good
// Only Firefox and Chrome support the download attribute.

Therefore, this method can not solve the problem

2. Then query the information and know that there are other methods to download, for example,

downloadFile(url, fileName) {
  fetch(url).then(res => {
     res.blob().then(blob => {
       const a= document.createElement('a');
       const urlBlob = window.URL.createObjectURL(blob);
       a.href = urlBlob;
       a.download = fileName;
       a.click();
       window.URL.revokeObjectURL(urlBlob)
     })
  })
}
// In this way, there are compatibility problems in IOS and Android. I guess the built-in browser does not support it
// This kind of debugging in H5 mode on the PC side can be downloaded
// There are other forms of this approach

// Download as form
function downloadFile() {
	 // Download File
	    // Download File
      var $iframe = $('<iframe />')
      var $form = $('<form  method="get" target="_self"/>')
      $form.attr('action', localUrl) // Set the url address of get
      // Set requested parameters
      $form.append('<input type="hidden"  name="' + 'attachmentId' + '" value="' + attachmentId + '" />')
      $iframe.append($form)
      $(document.body).append($iframe)
      $form[0].submit()// Submit Form 
      $iframe.remove()// remove frame 
}
// The form download is not debugged on the real machine
// In the chrome browser mobile phone simulator test, you can download the file

// Manually dispatch events using the dispatchEvent() method.
function downloadFile() { 
	 let a = document.createElement('a')
      a.href = localUrl
      a.download = (title || 'file') + '.xlsx'
      a.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}))
}
// This method is not debugged on the real machine
// In the chrome browser mobile phone simulator test, you can download the file
// Bubble (Boolean): whether to bubble; cancelable (Boolean): whether to cancel; View (AbstractView): the view associated with the event, generally document.defaultView;

Find the answer

Later, I inquired about the information and consulted the boss. I learned that IOS does not support file download, because IOS limits a single application, and the behavior of downloading and jumping to the browser is not supported. The operation in a single application is limited to a single application. Therefore, it is impossible to download on IOS through various download methods. Then I can only start with IOSpdf preview garbled code.

resolvent

It is possible that IOS directly opens the file and parses the file in the wrong format, resulting in garbled code.

`${window.location.origin}${url}/file?attachmentId=1813`
// Back end interface to get file address
response.setContentType("application/octet-stream");
//The original interface format requested by the back-end file may be binary. Will there be format incompatibility and failure to render pdf into pdf file

At this time, ask the back-end for help and help add an interface to judge the pdf file. If it is a pdf file

response.setContentType("application/pdf");
// Set the response to PDF format
`${window.location.origin}${url}/file/dingdingIOS?attachmentId=1813`
// A new dingdingIOS separate interface is added to separately render the PDF preview of ios

After this processing, the IOS preview will not be garbled