html转图片并下载

两种插件

1. html2canvas

2. dom-to-image

dom-to-image.min.js


// 浏览器直接引入
 

可使用npm下载
npm install dom-to-image


// es6使用方法

import domtoimage from './dom-to-image.min';

/**
 * 导出页面元素为图片等格式
 * @param dom html元素,类名,ID等选择器
 * @param name 导出文件的名称及后缀
 */
export function exportImage(dom: any, name: string) {
  let target = dom;
  if (typeof dom == "string") {
    target = document.querySelector(dom);
  }
  domtoimage.toBlob(target).then((blob) => {
    return downloadBlob(blob, 'image/jpeg', name);
  }).catch(err => {
    alert('您的浏览器不支持导出图片,推荐使用chrome浏览器!');
    console.log('exportImageError', err)
  });
}

总结: html2canvas兼容IE及Safari, 但dom-to-image在chrome中导出的图片还原度更高, html2canvas对某些html元素不支持; 具体使用需要仔细斟酌.