1

My current project requires a file download. The file is auto generated and has an unfriendly name when it's saved, so we are changing the file name to something easier to read on download.

For example if a user downloads a file called 324343242342.pdf we change it to Lesson1.pdf or something for the one that's saved on their computer.

I'm having some trouble with ie11 with this. I know that the download attribute doesn't work on ie11, so for that sake we are using blobs and things are working fine for download purposes across browsers, but I'm not sure how to change the name of the file in ie11.

In all other browsers I just do <a href="#" :download="new_file_name"> to call a small file name calculating method in the vue component, but this doesn't work for ie11 because the "download" attribute doesn't work there.

Anyone have any idea how to go about editing that name in ie11 as well? I'm only finding answers for fixing the download functionality in general, nothing about setting a file name.

Thank you!

movac
  • 1,576
  • 3
  • 21
  • 45
  • Does this answer helps you? https://stackoverflow.com/a/44287509/7629020 – Raffobaffo Jul 12 '20 at 20:30
  • I'm in favor of Daniel's answer. As you have solved the download issue in IE using blob, I think you're using `navigator.msSaveBlob(blob, defaultName)` function. The `defaultName` parameter is the file name to be used when saving file so you can change this to edit the download name of a file in IE 11. – Yu Zhou Jul 13 '20 at 02:34

1 Answers1

1

You have to do something similar to https://github.com/kennethjiang/js-file-download/blob/master/file-download.js

function downloadFile (data, filename, mime) {
    const blob = new Blob([data], { type: mime || 'application/octet-stream' })
    if (typeof window.navigator.msSaveBlob !== 'undefined') {
      // For IE
      window.navigator.msSaveBlob(blob, filename)
    } else {
      // For other browsers
      const blobURL = window.URL.createObjectURL(blob)
      const tempLink = document.createElement('a')
      tempLink.style.display = 'none'
      tempLink.href = blobURL
      tempLink.setAttribute('download', filename)

      if (typeof tempLink.download === 'undefined') {
        tempLink.setAttribute('target', '_blank')
      }

      document.body.appendChild(tempLink)
      tempLink.click()
      document.body.removeChild(tempLink)
      window.URL.revokeObjectURL(blobURL)
    }
  }
Daniel Elkington
  • 2,560
  • 6
  • 22
  • 35