vue引入html2canvas插件实现图片嵌入div展示下载 发布时间:2023/10/11 html2canvas 非常好用,便捷的将div标签可以下载下来的插件; 官网地址:http://html2canvas.hertzen.com/ vue项目中使用 下载插件 npm install --save html2canvas 复制代码 引入你需要的vue项目里 import html2canvas from "html2canvas"; 复制代码 组件中使用(我这里是打印二维码为例) html <!-- 二维码弹出框 --> <el-dialog title="二维码" width="250px" row-key="id" > <div style="height:255px;" ref="box"> <div id="qrcode" ref="qrcode"></div> <div style="margin-top:15px"> {{参数}}: <span style="font-weight: bold">{{参数}}</span> </div> <div> <span style="font-weight: bold">{{参数}}</span> </div> </div> <a class="down-code" :href="imgUrl" download>下载</a> <!-- <vue-q-art :config="config" :downloadButton="downloadButton"></vue-q-art> --> </el-dialog> 复制代码 js html2canvas(this.$refs.box).then(function (canvas) { _this.imgUrl = canvas.toDataURL("image/png"); //将canvas转为base64图片(eg. data:image/png;base64,ijskjlkj) }); 复制代码 这样就会吧文字和二维码图片统一嵌入到png图片里面; 我是前端小白,遇到一些好用的vue插件会给大家持续分享,希望大家多多支持,一键三连哈~~