a标签/html2canvas 图片下载的封装

a 标签下载图片

 // 下载图片（利用a标签）
 const download = () => {
   const domA = document.createElement('a')
   domA.href = item.imageBase64
   domA.download = item.actionResult // filename
   domA.click()
 }

/**
 *
 * @param {*} url
 * @param {*} id
 * @param {*} token
 */
const download = (url, id, token) => {
  let hrefUri = url;
  if (id && token) {
    hrefUri += '?id=' + id + '&token=' + token;
  }
  console.log('---', hrefUri)
  const link = document.createElement('a');
  link.download = filename || '';
  link.style.display = 'none';
  link.href = hrefUri;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

html2canvas 下载图片

说明：需要先在项目中引入 html2canvas 的插件

downloadImg() {
  let container = document.getElementById(this.domId);
  let ops = {
    backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
    useCORS: true, //支持图片跨域
    scale: 1, //设置放大的倍数
    allowTaint: true,
  };
  this.screenshot(container, ops);
},
// 绘制-下载图片
screenshot(container, options = {}) {
  const width = container.offsetWidth;
  const height = container.offsetHeight;
  const ops = {
    width,
    height,
    ...options,
  };
  html2canvas(container, ops).then((canvas) => {
    let a = document.createElement("a");
    a.href = canvas.toDataURL("image/jpeg");
    a.download = "ImageName";
    a.click();
  });
},