html2canvas 使用方法,uniapp、vue将页面部分转化为图片
作者:互联网
1.安装
npm i html2canvas
2.代码
<template> <view> <view class="print " @click="generatorImage" > <span style="font-size: 30px;">打印</span> </view> <view class="content" ref="addImage"> <div ref="capture" > 需要保存的html页面 <image src="../../static/icon/person3.png" mode="widthFix"></image> </div> </view> <image :src="imgs" mode="widthFix"></image> </view> </template> <script> import html2canvas from 'html2canvas'; export default { data() { return { } }, onl oad() {}, mounted() { this.generatorImage() }, methods: { generatorImage() { html2canvas(this.$refs.capture).then(canvas => {
// this.$refs.addImage.append(canvas);//在下面添加canvas节点 pc端可以转化创建a标签,直接下载 // let link = document.createElement("a"); // link.href = canvas.toDataURL();//下载链接 // console.log(canvas.toDataURL()) // link.setAttribute("download","体检表.png"); // link.style.display = "none";//a标签隐藏 // document.body.appendChild(link); // link.click();
this.imgs= canvas.toDataURL() //base64字符串 放到图片标签上 }); }, } } </script> <style> </style>
绿色部分是要转化成图片的页面,红色的是转化好的图片。h5长按就可以下载图片了
标签:uniapp,canvas,vue,html2canvas,link,toDataURL,页面,图片 来源: https://www.cnblogs.com/shangrao/p/14899203.html