浏览器端用JS完成创建和下载图片

2023年1月17日 259次阅读 来源: 文博

题目场景

在前端许多的项目中，文件下载的需求很罕见。尤其是经由过程JS天生文件内容，然后经由过程浏览器端实行下载的操纵。如图片，Execl 等的导出功用。日前，项目中就遇到了这类需求，在浏览器端完成保留当前网页为图片，然后还能够下载。

解决计划

网页天生图片

这里能够采纳 html2canvas 来完成。而且能够兼容大部分主流的浏览器。

  • Firefox 3.5+
  • Google Chrome
  • Opera 12+
  • IE9+
  • Safari 6+

文件下载

第一种计划

HTML5 新增了 download 属性，只要给 download 加上想要导出的文件名即可。如 download="file.jpg"。想要细致的相识此属性，能够参考 张鑫旭 写的一篇博文，传送门。

简朴代码完成以下：

import html2canvas from 'html2canvas';

// 天生图片，并自动下载
function captureScreenshot() {
  const preview = document.querySelector('.preview-graphs');
  html2canvas(preview).then((canvas) => {
      var img = document.createElement('a');
      img.href = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
      // 下载的文件名字
      img.download = `file.jpg`;
      img.click();
    })  
}

Note:上述完成，现在只要 Google Chrome 功用是一般的。兼容性存在很大的题目。

第二种计划

这里能够采纳 FileSaver.js。需以 Blob 的情势来举行保留。canvas 供应了一种建立 Blob 对象的要领 canvas.toBlob((blob) => {}) ，然则兼容性堪忧，绝大部分浏览器都没有完成。因而官网特地供应了如许的一个库，canvas-toBlob.js。

FileSaver.js is the solution to saving files on the client-side, and is perfect for web apps that generates files on the client, However if the file is coming from the server we recommend you to first try to use Content-Disposition attachment response header as it has more cross-browser compatible. – 摘自官网

FileSaver.js 是在客户端保留文件的解决计划，异常适合在客户端天生文件的Web应用程序，然则假如文件来自服务器，我们建议您起首尝试运用 Content-Disposition 附件相应 题目，由于它有更多的跨浏览器兼容。

能够兼容主流的浏览器，如 Firefox，Chrome，Edge，IE 10+ 等。

代码完成以下：

import html2canvas from 'html2canvas';
import FileSaver from 'file-saver';

// 这里没有用 canvas-toBlob.js
// base64 转换成 Blob
function dataURLToBlob(dataURL) {
  var BASE64_MARKER = ';base64,';
  var parts;
  var contentType;
  var raw;

  if (dataURL.indexOf(BASE64_MARKER) === -1) {
    parts = dataURL.split(',');
    contentType = parts[0].split(':')[1];
    raw = decodeURIComponent(parts[1]);

    return new Blob([raw], {type: contentType});
  }

  parts = dataURL.split(BASE64_MARKER);
  contentType = parts[0].split(':')[1];
  raw = window.atob(parts[1]);
  var rawLength = raw.length;
  var uInt8Array = new Uint8Array(rawLength);

  for (var i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }

  return new Blob([uInt8Array], {type: contentType});
}

// 天生图片，并自动下载
function captureScreenshot() {
  const preview = document.querySelector('.preview-graphs');
  html2canvas(preview).then((canvas) => {
     const fileBlob = dataURLToBlob(canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream'));
     const fileName = `file.jpg`;
     FileSaver.saveAs(fileBlob, fileName);
  });  
}

相干链接

    原文作者：文博
    原文地址: https://segmentfault.com/a/1190000017927051
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞