前端将页面转化为图片---进行下载导出、打印等功能

1.需要实现一个将div页面的东西导出,使用到了html2canvas

官网：

配置型 | HTML2CANVAS 中文文档 (allenchinese.github.io)

2.下载html2canvas

npm install --save html2canvas

3.导入使用到的页面

import html2canvas from 'html2canvas'

4.创建图片基础应用

主要代码：

  creatImg() {
            const setup = {
                useCORS: true, // 使用跨域
            };
            html2canvas(this.$refs.pictureAll, setup).then((canvas) => {
                this.url = canvas.toDataURL("image/jpg");//生成的图片路径
                // this.exportPicture(link, "文件名");
            });
        },

<template>
  <div id="app">
    <el-button @click="creatImg">生成图片</el-button>
    <div ref='pictureAll'>
        hgjg
        jdd我顶顶顶
    </div>
    <img :src="url" alt="">
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data(){
    return {
      url:'',
    }
  },
  methods:{
    creatImg() {
            const setup = {
                useCORS: true, // 使用跨域
            };
            html2canvas(this.$refs.pictureAll, setup).then((canvas) => {
                this.url = canvas.toDataURL("image/jpg");//生成的图片路径
                // this.exportPicture(link, "文件名");
            });
        },
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

其他属性：

data-html2canvas-ignore：添加这个属性，生成图片的时候回忽略此部分，在想忽略的标签直接添加这个属性即可，例如：

  <div data-html2canvas-ignore style="width:100%;height:20px;background:red" @click="test">
      gfdgdf
  </div>