几种下载文件的方法

原创

wx659514b80f637 2024-01-03 17:02:33 博主文章分类：文件下载 ©著作权

文章标签 文件下载 文章分类 JavaScript 前端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者wx659514b80f637的原创作品，请联系作者获取转载授权，否则将追究法律责任

1.URL.createObjectURL

let link = document.createElement('a');
link.download = 'hello.txt';

let blob = new Blob(['Hello, world!'], {type: 'text/plain'});

link.href = URL.createObjectURL(blob);

link.click();

URL.revokeObjectURL(link.href);

2. reader.readAsDataURL

let link = document.createElement('a');
link.download = 'hello.txt';

let blob = new Blob(['Hello, world!'], {type: 'text/plain'});

let reader = new FileReader();
reader.readAsDataURL(blob); // 将 Blob 转换为 base64 并调用 onload

reader.onload = function() {
  link.href = reader.result; // data url
  link.click();
};

3. Image 转换为 blob 复制图片

// 获取任何图像
let img = document.querySelector('img');

// 生成同尺寸的 <canvas>
let canvas = document.createElement('canvas');
canvas.width = img.clientWidth;
canvas.height = img.clientHeight;

let context = canvas.getContext('2d');

// 向其中复制图像（此方法允许剪裁图像）
context.drawImage(img, 0, 0);
// 我们 context.rotate()，并在 canvas 上做很多其他事情

// toBlob 是异步操作，结束后会调用 callback
canvas.toBlob(function(blob) {
  // blob 创建完成，下载它
  let link = document.createElement('a');
  link.download = 'example.png';

  link.href = URL.createObjectURL(blob);
  link.click();

  // 删除内部 blob 引用，这样浏览器可以从内存中将其清除
  URL.revokeObjectURL(link.href);
}, 'image/png');

如果我们更喜欢 async/await 而不是 callback：
let blob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));
let link = document.createElement('a');
link.download = 'example.png';

link.href = URL.createObjectURL(blob);
link.click();

// 删除内部 blob 引用，这样浏览器可以从内存中将其清除
URL.revokeObjectURL(link.href);

4.划线点击确定可以下载所画的截图

<canvas id="canvasElem" width="100" height="80" style="border:1px solid"></canvas>
  <input type="button" value="确定" onclick="submit()">

  <script>
    canvasElem.onmousemove = function(e) {
      let ctx = canvasElem.getContext('2d');
      ctx.lineTo(e.clientX, e.clientY);
      ctx.stroke();
    };

    async function submit() {
      let blob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));
      let link = document.createElement('a');
      link.download = 'example.png';

      link.href = URL.createObjectURL(blob);
      link.click();

      // 删除内部 blob 引用，这样浏览器可以从内存中将其清除
      URL.revokeObjectURL(link.href);
    }
  </script>