Vue - 截图并下载到本地（html2canvas）

html2canvas文档： http://html2canvas.hertzen.com/

一. 使用html2canvas

1. 安装html2canvas
   npm install --save html2canvas
2. 引入html2canvas

   import html2canvas from "html2canvas";
   

3. 使用引入html2canvas开始截屏并下载

   screen() {
     //对指定容器进行截屏
     html2canvas(document.getElementById("view"), {
       useCORS: true, //是否尝试使用CORS从服务器加载图像
       backgroundColor: '#ececec', //画布背景色（如果未在DOM中指定）。设置null为透明
     }).then((canvas) => {
       // 返回一个 canvas 对象，在dom中渲染 canvas 对象
       //document.body.appendChild(canvas);
       // 转化成 dataurL
       let canvasImg = canvas.toDataURL("image/png");
       //调用下载方法
       this.downLoadFile("simple", canvasImg);
     });
   },
   downLoadFile(fileName, canvasImg) {
     //创建一个a标签
     var a = document.createElement("a");
     //指定下载文件名称
     a.href = canvasImg;
     a.download = fileName;
     //模拟点击
     a.click();
   },
   

二. 一个使用html2canvas截屏并下载的实例

<template>
  <div>
    <div id="view">
      <p>这是一个容器</p>
      <p>对我开始截屏</p>
    </div>
    <button @click="screen">开始截屏</button>
  </div>
</template>

<script>
/**1.安装html2canvas */
//npm install --save html2canvas
/**2.引入html2canvas */
import html2canvas from "html2canvas";
export default {
  data() {
    return {};
  },
  methods: {
    /**3.使用引入html2canvas开始截屏 */
    screen() {
      //对指定容器进行截屏
      html2canvas(document.getElementById("view"), {
        useCORS: true, //是否尝试使用CORS从服务器加载图像
        backgroundColor: '#ececec', //画布背景色（如果未在DOM中指定）。设置null为透明
      }).then((canvas) => {
        // 返回一个 canvas 对象，在dom中渲染 canvas 对象
        //document.body.appendChild(canvas);
        // 转化成 dataurL
        let canvasImg = canvas.toDataURL("image/png");
        //调用下载方法
        this.downLoadFile("simple", canvasImg);
      });
    },
    downLoadFile(fileName, canvasImg) {
      //创建一个a标签
      var a = document.createElement("a");
      //指定下载文件名称
      a.href = canvasImg;
      a.download = fileName;
      //模拟点击
      a.click();
    },
  },
};
</script>

<style scoped>
</style>