DataUrl 또는 BlobUrl 을 통 해 그림, 텍스트 파일, html 미리 보기 없 이 직접 다운로드 할 수 있 습 니 다.

1. Dataurl 방식:

 // ./util.js
 //    base64
 function image2base64(img) {  
  const canvas = document.createElement("canvas");  
  canvas.width = img.width;  
  canvas.height = img.height;  
  const ctx = canvas.getContext("2d");  
  ctx.drawImage(img, 0, 0, img.width, img.height);  
  const mime = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();  
  const dataUrl = canvas.toDataURL("image/" + mime);  
  return dataUrl;
 }
 // html  ， a  href       dataUrl
 데이터 다운로드: Url 이미지
 ...
 
  const image = new Image();
  image.setAttribute("crossOrigin",'Anonymous');
  image.src = '../files/test-download.png' + '?' + new Date().getTime();
  image.onload = function() {  
    const imageDataUrl = image2base64(image);  
    const downloadDataUrlDom = document.getElementById('downloadDataUrl');
    downloadDataUrlDom.setAttribute('href', imageDataUrl);
    downloadDataUrlDom.setAttribute('download', 'download-data-url.png');
    downloadDataUrlDom.addEventListener('click', () => {
      console.log('    ');
    });
  }  

2. BlobUrl 의 전체적인 논 리 는 더욱 복잡 해 졌 습 니 다. 먼저 파일 - > base 64 (dataUrl) - > blob - > blobUrl.

 //    ：          base64，      
 //    ： base64   blob  
 // DataUrl   Blob  
    function dataUrl2Blob(dataUrl) {
      var arr = dataUrl.split(','),
          mime = arr[0].match(/:(.*?);/)[1],
          bStr = atob(arr[1]),
          n = bStr.length,
          unit8Array = new Uint8Array(n);
      while (n--) {
        unit8Array[n] = bStr.charCodeAt(n);
      }
      return new Blob([unit8Array], { type: mime });
    } 
 //    ：  blob     BlobUrl
 URL.createObjectURL(imageBlobData);
 
 //     
  blobUrl 사진 다운로드
  ...
  const image2 = new Image();  
  image2.setAttribute("crossOrigin",'Anonymous');
  image2.src = '../files/test-download.png' + '?' + new Date().getTime();
  image2.onload = function() {  
    const imageDataUrl = image2base64(image2);
    const imageBlobData = dataUrl2Blob(imageDataUrl);
    const downloadDataUrlDom = document.getElementById('downloadBlobUrl');
    downloadDataUrlDom.setAttribute('href', URL.createObjectURL(imageBlobData));
    downloadDataUrlDom.setAttribute('download', 'download-data-url.png');
    downloadDataUrlDom.addEventListener('click', () => {
      console.log('    ');
    });
  }

양 자 는 전체적으로 보면 문제 가 존재 하기 때문에 그림 과 텍스트 파일 을 직접 다운로드 할 수 없다. 그러나 이렇게 간결 하기 때문에 너 는 불필요 한 조작 을 하지 않 았 고 문제 가 합 리 적 이다.또한, 위의 몇 가지 방식 도 보 았 습 니 다. dataUrl 은 그림 의 다운로드 에 적합 합 니 다. blobUrl 은 귀 찮 지만 텍스트 파일 의 다운로드 에 매우 유용 합 니 다. 다운로드 할 내용 을 blob 데이터 로 직접 변환 한 다음 blobUrl 로 다운로드 하여. txt,. json 등 파일 형식 에 적용 할 수 있 습 니 다.
패키지, 엑셀 파일 등 특수 파일 형식 을 다운로드 하고 CDN 에 접근 할 수 있 는 url 링크 를 저장 할 수 있 습 니 다.그렇다면 이런 방식 은 완벽 하 다. 물론 위 에서 말 한 호환성 문 제 를 받 아들 일 수 있다 면.또한 dataUrl 이나 blobUrl 을 사용 할 때 많은 문제 가 존재 합 니 다. 예 를 들 어 cors 와 같은 일 은 이런 방법 을 사용 하 는 것 을 권장 합 니 다. 그러나 백 엔 드, 즉 백 엔 드 에 맞 춰 전환 해 주 는 것 이 필요 합 니 다. 전환 한 url 을 가지 고 다운로드 하면 됩 니 다.