最近有一个需求,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: {