引入依赖：

npm install html2canvas --save

插件版本：

 vue2版代码展示:

          <div class="poster" id="postHtml" ref="postHtml"></div>

import html2canvas from "html2canvas";



methods: {
    /** 将html元素转换成海报图片 */
    createPoster() {
      const name = `商城二维码${this.organization_group_name}`;
      const posterHtml = this.$refs.postHtml;
      // 生成海报
      console.log("生成海报", posterHtml, name);
      const domObj = posterHtml;
      console.log(domObj);
      html2canvas(domObj, {
        allowTaint: true,
        useCORS: true,
        width: 200,
        height: 200,
        scrollY: -18,
        scrollX: -0,
        onclone(doc) {}
      }).then(canvas => {
        // document.body.appendChild(canvas)
        console.log("结果", domObj, canvas);
        this.downloadQRImg(canvas, name);
      });
    },
    /** 根据URL下载图片 */
    downloadQRImg(canvas, name) {
      /** 新Image对象，可以理解为DOM */
      let image = new Image();
      /** 解决跨域 Canvas 污染问题 */
      image.setAttribute("crossOrigin", "anonymous");
      // image.onload = function() {
      /** canvas.toDataURL 返回的是一串Base64编码的URL,指定格式 PNG */
      let imgUrl = canvas.toDataURL("image/png");
      console.log(imgUrl);
      image.src = imgUrl;
      /** 生成一个a元素,并创建一个单击事件 */
      let a = document.createElement("a");
      a.download = name || "photo"; // 设置图片名称
      a.href = imgUrl; // 将生成的URL设置为a.href属性
      a.setAttribute("id", "myLink");
      document.body.appendChild(a);
      console.log("链接", a);
      this.exportCodeConfirm();
      // }
    },
    /** 导出/下载 二维码 */
    exportCodeConfirm() {
      setTimeout(() => {
        let event = new MouseEvent("click");
        /** 触发a的单击事件 */
        document.getElementById("myLink").dispatchEvent(event);
      }, 0);
    }}

vue3版本保存公众号页面为图片

<template>
    <div class="flex-page">
        <div ref="postHtml" class="flex-page-content">
            <div class="primary-text">
                <primary-title :offset-bottom="-0.2" title="会诊总结"></primary-title>
                <div v-if="openMarkName" class="save-img"><span class="save-page" @click="createPoster()"></span></div>
            </div>
            <div class="summary-box">
                <template v-if="visitType === 'preVisited'">
                    <div class="summary-title">肿瘤类型</div>
                    <div class="summary-info">{{ preSummary.tumorTypeName || '无' }}</div>
                    <div class="summary-title">临床分期</div>
                    <div class="summary-info">{{ preSummary.clinicalStages || '无' }}</div>
                    <div class="summary-title">本次主诉</div>
                    <div class="summary-info">{{ preSummary.chiefComplaint || '无' }}</div>
                    <div class="summary-title">主任建议</div>
                    <div class="summary-info">{{ preSummary.suggestion || '无' }}</div>
                    <div class="summary-title">建议解读</div>
                    <div class="summary-info">{{ preSummary.suggestionDetail || '无' }}</div>
                </template>
                <template v-else-if="summary.length > 0">
                    <div class="summary-desc">结合各专家意见如下</div>
                    <div class="summary-content">{{ summary[0].reasonName }}</div>
                    <div class="summary-img-box">
                        <template v-for="(media, i) in summary[0].mediaList">
                            <van-image v-if="media.mediaCategoryId === IMG_CATEGORY_ID" :key="i" :src="media.mediaUrl" :radius="6" class="summary-img" />
                        </template>
                    </div>
                    <template v-for="(media, i) in summary[0].mediaList">
                        <a v-if="media.mediaCategoryId === PDF_CATEGORY_ID" :key="i" :href="media.mediaUrl" class="summary-pdf">会诊总结.pdf</a>
                    </template>
                </template>
            </div>
            <div class="mark-name">
                <img v-if="summary[0]?.isSignatured && summary[0]?.providerSignatureUrl" :src="summary[0]?.providerSignatureUrl" alt="" />
                <span v-else>{{ summary[0]?.providerName }}</span>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, Ref, ref, onMounted, nextTick } from 'vue';
import { PrimaryTitle } from '@components';
import { Image as VanImage } from 'vant';
import { commonUtils } from '@utils';
import html2canvas from 'html2canvas';
import visitProviderService from '@api/visit/visit-provider.service';
import visitConsulationService from '@api/visit/visit-consulation.service';
import VisitConsulationSummaryModel from '@models/visit/visit-consulation-summary.model';
import ConsultationVisitNoteModel from '@models/consultation/consultation-visit-note.model';
import { configIdMap } from '@constants';
import configurationService from '@api/configuration.service';

export default defineComponent({
    components: {
        PrimaryTitle,
        'van-image': VanImage,
    },
    props: {
        visitId: {
            type: String,
            required: true,
        },
        visitType: {
            type: String,
            required: false,
            default: 'preVisited',
        },
    },
    setup: (props) => {
        const postHtml = ref();
        const openMarkName = ref<boolean>(false);
        const preSummary: Ref<VisitConsulationSummaryModel> = ref(new VisitConsulationSummaryModel());
        const summary: Ref<ConsultationVisitNoteModel[]> = ref([]);
        // 获取会诊总结
        const getConsulationSummary = () => {
            if (props.visitType === 'preVisited') {
                visitProviderService
                    .getVisitSummary(props.visitId)
                    .then((res) => {
                        preSummary.value = res;
                    })
                    .catch((err) => {
                        commonUtils.showTipMessage(err?.responseText || '请求失败');
                    });
            } else {
                visitConsulationService
                    .getConsulationVisitNote(props.visitId, '39')
                    .then((res) => {
                        summary.value = res;
                    })
                    .catch((err) => {
                        commonUtils.hideLoading();
                        commonUtils.showTipMessage(err?.responseText || '请求失败');
                    });
            }
        };
        // 图片转为base64编码
        function image2Base64(img: HTMLImageElement) {
            // eslint-disable-next-line prefer-const, no-var
            let canvas = document.createElement('canvas'); // 一定要设置为let，不然图片不显示
            canvas.width = img.width;
            canvas.height = img.height;
            const ctx = canvas.getContext('2d');
            ctx!.drawImage(img, 0, 0, img.width, img.height);
            const dataURL = canvas.toDataURL('image/png');
            return dataURL;
        }

        /** 导出/下载 二维码 */
        const exportCodeConfirm = () => {
            setTimeout(() => {
                const event = new MouseEvent('click');
                /** 触发a的单击事件 */
                document.getElementById('myLink')!.dispatchEvent(event);
            }, 0);
        };
        /** 根据URL下载图片 */
        const downloadQRImg = (canvas: any, name: string) => {
            /** 新Image对象，可以理解为DOM */
            const image = new Image();
            /** 解决跨域 Canvas 污染问题 */
            // image.setAttribute('crossOrigin', 'anonymous');
            // image.onload = function() {
            /** canvas.toDataURL 返回的是一串Base64编码的URL,指定格式 PNG */
            const imgUrl = canvas.toDataURL('image/png');
            image.src = imgUrl;
            /** 生成一个a元素,并创建一个单击事件 */
            const a = document.createElement('a');
            a.download = name || 'photo'; // 设置图片名称
            a.href = imgUrl; // 将生成的URL设置为a.href属性
            a.setAttribute('id', 'myLink');
            // 开发者工具查看生成的链接href的值是否是一个完整的base64格式图片
            // console.log('标签', a);
            document.body.appendChild(a);
            exportCodeConfirm();
            // }
        };
        /** 将html元素转换成海报图片 */
        const createPoster = async () => {
            const name = `会诊总结`;
            const posterHtml = postHtml.value;
            // }, 1000);

            // 生成图片
            const domObj = posterHtml;
            await nextTick();
            // 确保页面渲染完毕
            setTimeout(() => {
                html2canvas(domObj, {
                    allowTaint: true,
                    imageTimeout: 500,
                    useCORS: true,
                    scrollY: -18,
                    scrollX: -0,
                    height: domObj.clientHeight,
                }).then((itsCanvas) => {
                    // document.body.appendChild(itsCanvas);
                    downloadQRImg(itsCanvas, name);
                });
            }, 1000);
        };
        const getEnableConsultationRecordFileInfo = async () => {
            const info = await configurationService.getConfigurationList([configIdMap.ENABLE_CONSULTATION_RECORD_FILE]);
            openMarkName.value = info[configIdMap.ENABLE_CONSULTATION_RECORD_FILE];
        };
        onMounted(async () => {
            await getConsulationSummary();
            getEnableConsultationRecordFileInfo();
            // 默认执行，加载时间较长不放在点击事件中，达到正常保存页面中的在线图片链接的效果
            nextTick(() => {
                setTimeout(() => {
                    const imgTag = document.querySelectorAll('img');
                    // 获取base64编码
                    let base64 = '';
                    // 将页面的img的src值改为base64格式
                    imgTag.forEach((item, i) => {
                        const img = new Image();
                        img.setAttribute('crossOrigin', 'anonymous');
                        // 图片链接地址后增加随机数防止缓存
                        img.src = `${imgTag[i].src}&v=${Math.random()}`;
                        img.onload = () => {
                            base64 = image2Base64(img);
                            imgTag[i].setAttribute('src', base64);
                        };
                    });
                }, 3000);
            });
        });
        return {
            summary,
            preSummary,
            IMG_CATEGORY_ID: '301200001',
            PDF_CATEGORY_ID: '301200004',
            postHtml,
            createPoster,
            commonUtils,
            openMarkName,
        };
    },
});
</script>

<style lang="scss" scoped>
.summary-box {
    padding: 0 2rem 2rem 2rem;
}
.summary-title {
    font-size: 1.5rem;
    font-weight: 400;
    color: $icon-color;
    margin-bottom: 1.4rem;
}
.summary-info {
    background: $bg-text-color;
    border-radius: 0.4rem;
    padding: 1rem;
    color: $grey-color;
    font-size: 1.4rem;
    font-weight: 400;
    margin-bottom: 1.6rem;
}
.summary-desc {
    color: $arrow-color;
    font-size: 1.4rem;
    font-weight: 400;
    margin: 0 0 1.2rem 0.8rem;
}
.summary-content {
    margin: 0 0 2rem 1rem;
    color: $text-color;
    font-size: 1.4rem;
    font-weight: 400;
    li {
        line-height: 3rem;
        list-style: none;
    }
}
.summary-img-box {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    .summary-img {
        width: 7.4rem;
        height: 7.4rem;
        margin-right: 0.8rem;
    }
}
.summary-pdf {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--font-color-primary);
    margin-left: 0.4rem;
}
.save-img {
    height: 4.5rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: $arrow-color;
    span {
        display: inline-block;
        width: 11.9rem;
        height: 4.5rem;
        background: url('../../assets/images/icons/save_page.png') no-repeat;
        background-size: 100%;
    }
}
.flex-page-content {
    overflow-y: visible !important ;
}
.flex-page {
    height: auto;
}
.mark-name {
    padding: 0 2rem 0 2rem;
    img {
        width: 11rem;
        height: 11rem;
    }
    span {
        font-size: 1.7rem;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 400;
        color: #2b2b2b;
        line-height: 3rem;
    }
}
.primary-text {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0 1rem 2rem;
}
</style>