操作dom 把页面转为图片并下载

原理：
1，通过命令 npm i html2canvas，引用 html2canvas 的包，它可以将页面DOM元素生成 canvas 元素；然后使用 canvas 的 toDataURL(‘image/jpeg’) 方法，将 canvas 元素生成图片base64格式的 url；
2，动态创建一个 a 标签，将 上面获取到的 url 添加给 a 标签的 href 属性，然后模拟 a 标签点击，即可实现图片下载。

<template>
  <div>
    <!-- 点击部分 -->
    <button @click="generateImages">点击生成图片并将图片保存在本地</button>
    <!-- 要生成的图片的内容区域 -->
    <div class="content"></div>
    <!-- 要生成的图片的展示区域 -->
    <div class="openimage"></div>
  </div>
</template>
<script>
import html2canvas from 'html2canvas'
methods: {
  // 此处以 card 部分内容为例，假设我们要将 card 整个 div 的内容区域变为图片
  generateImages () {
     // 图片参数设置
    const opts = {
        scale: scale, 
        canvas: canvas, 
        logging: true, 
        width: width, 
        height: height,
        backgroundcolor: '#FFFFFF',
        useCORS: true   // 用于解决图片跨域
    };
    html2canvas(document.querySelector('.content'),opts).then(canvas => {
      const imgUrl = canvas.toDataURL('image/jpeg')
      const image = document.createElement('img')
      image.src = imgUrl
      // 将生成的图片放到 类名为 content 的元素中，展示图片
      document.querySelector('.openimage').appendChild(image)
         // 下载图片
      const a = document.createElement('a')
      a.href = imgUrl
      // a.download 后面的内容为自定义图片的名称
      a.download = 'study_download'
      a.click()
     })
  }
}
</script>