JS如何将 DOM 生成图片并下载

VIP文章小贵子的博客

已于 2023-01-04 12:31:44 修改

阅读量530

点赞数

分类专栏： vue 文章标签：前端 html5 html dom

于 2023-01-04 12:26:26 首次发布

本文链接：https://blog.csdn.net/zyg1515330502/article/details/128545542

版权

最近有一个需求，h5页面生成图片，保存图片打开弹窗，并下载。如图所示：

文件结构如下：

index.vue :

<template>
  <div class="report-wrap">
    <div class="content">
      <swiper ref="Swiper" class="swiper-wrapper" :options="swiperOption">
        <swiper-slide class="section">
          <SectionOne ref="activeTalent" :data="activeTalent" :nickName="nickName" :year="year" :isMobile="isMobile" @slideNext="slideNext" />
        </swiper-slide>
        <swiper-slide class="section" v-if="communicator.speechType !== 0">
          <SectionTwo ref="communicator" :data="communicator" :isMobile="isMobile" @slideNext="slideNext" />
        </swiper-slide>
        <swiper-slide class="section" v-if="explorer.speechType !== 0">
          <SectionThree ref="explorer" :data="explorer" :isMobile="isMobile" @slideNext="slideNext" />
        </swiper-slide>
        <swiper-slide class="section" v-if="
            !(
              attendance.timeTalent.speechType === 0 &&
              attendance.earlyArrival.speechType === 0 &&
              attendance.lateReturner.speechType === 0
            )
          ">
          <SectionFour ref="attendance" :data="attendance" :isMobile="isMobile" @slideNext="slideNext" />
        </swiper-slide>
        <swiper-slide class="section" v-if="weeklyExpert.speechType !== 0">
          <SectionFive ref="weeklyExpert" :data="weeklyExpert" :isMobile="isMobile" @slideNext="slideNext" />
        </swiper-slide>
        <swiper-slide class="section" v-if="okrTalent.speechType !== 0">
          <SectionSix ref="okrTalent" :data="okrTalent" :isMobile="isMobile" @slideNext="slideNext" />
        </swiper-slide>
        <swiper-slide class="section" v-if="conferenceMaster.speechType !== 0">
          <SectionSeven ref="conferenceMaster" :data="conferenceMaster" :isMobile="isMobile" @slideNext="slideNext" />
        </swiper-slide>
        <swiper-slide class="section" v-if="approvalExpert.speechType !== 0">
          <SectionEight ref="approvalExpert" :data="approvalExpert" :isMobile="isMobile" @slideNext="slideNext" />
        </swiper-slide>
        <swiper-slide class="section" v-if="docExpert.speechType !== 0">
          <SectionNine ref="docExpert" :data="docExpert" :isMobile="isMobile" @slideNext="slideNext" />
        </swiper-slide>
        <swiper-slide class="">
          <SectionTen class="swiper-no-swiping" ref="endData" :data="endData" :nickName="nickName" :year="year" :isMobile="isMobile" @saveClick="saveClick" @again="again" />
        </swiper-slide>
      </swiper>
      <img ref="saveImg" class="saveImg" :src="showImg" alt="" @click="saveClick" />
    </div>

    <Preview ref="previewBox" :style="{height: endData.medalData.length > 6 ? '900px' : '812px' }">
      <component :is="getType()" :data="previewData" :nickName="nickName" :year="year" :headShow="headShow"></component>
    </Preview>
    <Dialog v-if="dialogVisible" :canvasImageUrl="canvasImageUrl" @close="close"> </Dialog>
  </div>
</template>

<script>
import SectionOne from './components/sectionOne/index.vue';
import SectionTwo from './components/sectionTwo/index.vue';
import SectionThree from './components/sectionThree/index.vue';
import SectionFour from './components/sectionFour/index.vue';
import SectionFive from './components/sectionFive/index.vue';
import SectionSix from './components/sectionSix/index.vue';
import SectionSeven from './components/sectionSeven/index.vue';
import SectionEight from './components/sectionEight/index.vue';
import SectionNine from './components/sectionNine/index.vue';
import SectionTen from './components/sectionTen/index.vue';
import Dialog from './components/dialog.vue';
import Preview from './components/preview.vue';
import { staffAnnualReport } from './services';
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import { debounce } from '@/utils/util.js';
import { config as baseConfig } from '@pro-teams/base';
import domtoimage from 'dom-to-image';
const { platform } = baseConfig;
export default {
  components: {
    SectionOne,
    SectionTwo,
    SectionThree,
    SectionFour,
    SectionFive,
    SectionSix,
    SectionSeven,
    SectionEight,
    SectionNine,
    SectionTen,
    Dialog,
    Preview,
    swiper,
    swiperSlide,
  },
  data() {
    return {
      showImg: require('./images/button/保存图片.svg'),
      dialogVisible: false,
      canvasImageUrl: '',
      saveImgTime: 0,
      canvasImgTime: 0,
      fullpage: null,
      headShow: false, // 最后一页不显示头部
      year: '',
      userName: '',
      nickName: '',
      previewCom: 'sectionOne',
      previewData: {}, // 预览
      activeTalent: {}, // 日活
      communicator: {}, // 消息
      explorer: {}, // 工作台
      attendance: {
        timeTalent: {}, // 时间达人
        earlyArrival: {}, // 早鸟达人
        lateReturner: {}, // 夜猫达人
      }, // 考勤
      weeklyExpert: {}, // 周报
      okrTalent: {}, // OKR
      conferenceMaster: {}, // 会议
      approvalExpert: {}, // 审批
      do