General download && Vue file image download processing

General download, also a tag with a link address, tag with a Download attribute. When the address is provided by the back end: create a label, then attach the download link, file name and attribute to a note, and finally create the click effect, and finally generate a label clearly. Another is the picture address: can be Base64 plus canvas, the download of pictures can be processed. The following is the related method handling function HTML and file download

HTML and file download

<a href="large.jpg" download>download</a>
Copy the code

File download and back-end table export

export function downloadFile(url, filename) {
    // Create hidden downloadable links
    let link = document.createElement('a');
    link.href = url;
    link.download = filename;
    link.target = '_blank';
    link.style.display = 'none';
    document.body.appendChild(link);
    // Trigger the click
    link.click();
      // Then remove
    document.body.removeChild(link);
    link = null;
}
Copy the code

Add parameters:

export function generateQS(baseurl, paramObj) {
    let returnUrl = baseurl + '? '
    for (const key in paramObj) {
    // object.hasownProperty (prop) Determines whether an Object has specified properties
    // Return value Boolean
        if (paramObj.hasOwnProperty(key)) {
            const element = paramObj[key];
            returnUrl += key + '=' + element + '&'; }}return returnUrl;
}
Copy the code

Text message file download with HTML5 Blob

const funDownload = function (content, filename) {
    // Create hidden downloadable links
    let eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';
    // Character content is converted to bloB address
    let blob = new Blob([content]);
    eleLink.href = URL.createObjectURL(blob);
    // Trigger the click
    document.body.appendChild(eleLink);
    eleLink.click();
    // Then remove
    document.body.removeChild(eleLink);
};
Copy the code

Implement arbitrary file download with Base64

let funDownload = function (domImg, filename) {
    // Create hidden downloadable links
    let eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';
    // Image to base64 address
    let canvas = document.createElement('canvas');
    let context = canvas.getContext('2d');
    let width = domImg.naturalWidth;
    let height = domImg.naturalHeight;
    context.drawImage(domImg, 0.0);
    // If it is a PNG image, canvas.todataurl ('image/ PNG ')
    eleLink.href = canvas.toDataURL('image/jpeg');
    // Trigger the click
    document.body.appendChild(eleLink);
    eleLink.click();
    // Then remove
    document.body.removeChild(eleLink);
};
Copy the code

HTML Blob file download optimization

Note: createObjectURL is not available in the new chrome. MDN document

export const downloadFile = (blob, fileanme) = > {
  // Compatible IE and EDGE cannot open Blob URL linking methods
  if (typeof window.navigator.msSaveBlob ! = ='undefined') {
    window.navigator.msSaveBlob(blob, fileanme)
  } else {
    let URL = window.URL || window.webkitURL;
    // blobUrl created with the obtained BLOb object
    const blobUrl = URL.createObjectURL(blob);
    const a = document.createElement('a');
    if (typeof a.download === 'undefined') {
      window.location = blobUrl
    } else {
      document.body.appendChild(a)
      a.style.display = 'none'

      a.href = blobUrl;
      // Specify the file name for the download
      a.download = fileanme;
      a.click();
      document.body.removeChild(a)
      // Remove the blobUrl of the blob objectURL.revokeObjectURL(blobUrl); }}}Copy the code

conclusion

In Chrome, a simulated click creates an element that triggers a download without appending it to the page, but in Firefox it does not, so the funDownload() method above has a appendChild and removeChild handler. Just to be compatible with Firefox.

General download && Vue file image download processing