vue中html2canvas的使用

Html2canvas是什么?

是一个脚本 这个脚本可以允许用户直接在浏览器上拍摄网页或其中一部分的"屏幕截图".屏幕截图是基于DOM,因此可能无法真实表示100％的准确度，因为它无法生成实际的屏幕截图，而是根据页面上的可用信息构建屏幕截图。

一、安装html2canvas

npm install --save html2canvas

二、使用

目录 src/utils/html-jpeg文件

import html2Canvas from 'html2canvas';

const getJpeg = dom => {
  return new Promise(resolve => {
    html2Canvas(dom).then(canvas => {
      const jpeg = canvas.toDataURL('image/jpeg', 1.0);
      // resolve(new Blob([jpeg]));
      resolve(base64ToFile(jpeg));
    });
  });
};
// base64转化为file文件
const base64ToFile = urlData => {
  const arr = urlData.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bytes = atob(arr[1]);
  let n = bytes.length;
  const ia = new Uint8Array(n);
  while (n--) {
    ia[n] = bytes.charCodeAt(n);
  }
  return new File([ia], 'jpeg', { type: mime });
};

export default getJpeg;

二、应用

const resultContentJpeg = await getJpeg(this.$refs.content);

 二、完整代码

<template>
  <div>
    <!--点击button即可实现页面的截图-->
    <el-button size="mini" type="primary" plain @click="download">导出图片</el-button>
    <div ref="content">
      <!--这里是需要截图的区域-->
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import getJpeg from '@/utils/html-jpeg'
import { XXXApi } from '@/api/report';
export default {
  components: { },
  data() {
    return {}
  },
  methods: {
    // 第一种调用后台接口form-data传file文件
    async download() {
      const resultContentJpeg = await getJpeg(this.$refs.content)
      let form = new FormData()
      form.append(resultContentJpeg)
      XXXApi(form).then(() => {})
    },
    // 第二种方式直接下载图片
    download() {
      const ref = this.$refs.content // 截图区域
      html2canvas(ref, {
        backgroundColor: '#e8f4ff',
        useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
      }).then((canvas) => {
        const dataURL = canvas.toDataURL('image/png')
        const creatDom = document.createElement('a')
        document.body.appendChild(creatDom)
        creatDom.href = dataURL
        creatDom.download = '图片'
        creatDom.click()
      })
    }
  }
}
</script>