uniapp中页面元素转图片APP端

页面效果（具体样式自己调整）

截图效果

原本app端是无法使用html2canvas的因为，app端不支持浏览器查找dom节点，如果使用会报错，
不过我在uniapp里面看到了renderjs（一个运行在视图层的js）。使用这个就可以帮助我们在app端内使用浏览器对象了。这样html2canvas也就可以实现了。

<template><view><button type="default" @click="html2canvas.emitData">下载</button><!-- 第一页 --><view class="page" id="contractimage1"><view class="fl a-i-center"><text class="serial-number">编号：</text><input type="text" class="contract-input":disabled="isDisabled" v-model="form.value1" /></view><view class="text-center contract-name">四川房管家信息科技有限公司施工合同</view><view class="fl a-i-center jc-center"><text class="serial-number">甲方：</text><input type="text" :disabled="isDisabled"v-model="form.value2" class="contract-input" /></view><view class="fl a-i-center jc-center"><text class="serial-number">乙方：</text>四川房管家信息科技有限公司</view><view class="fl a-i-center jc-center"><text class="serial-number">签订日期：</text><input :disabled="isDisabled" type="text" class="date-input" v-model="form.value3" /><text class="serial-number">年</text><input :disabled="isDisabled" type="text" class="date-input" v-model="form.value4" /><text class="serial-number">月</text><input :disabled="isDisabled" type="text" class="date-input" v-model="form.value5" /><text class="serial-number">日</text></view><view class="page-number">第1页 共{{ pages }}页</view></view><!-- 第二页 --><view class="page" id="contractimage2"><view class="fl a-i-center"><text class="serial-number">甲方：</text><input :disabled="isDisabled" type="text" v-model="form.value6"class="contract-input" /></view><view class="fl a-i-center"><text class="serial-number">负责人：</text><input :disabled="isDisabled" type="text" v-model="form.value7"class="contract-input" /></view><view class="fl a-i-center"><text class="serial-number">地址：</text><input :disabled="isDisabled" type="text" v-model="form.value8"class="contract-input" /></view><view class="fl a-i-center"><text class="serial-number">联系方式：</text><input :disabled="isDisabled" type="text"v-model="form.value9" class="contract-input" /></view><view class="fl a-i-center"><text class="serial-number">乙方：四川房管家信息科技有限公司</text></view><view class="fl a-i-center"><text class="serial-number">公司负责人：</text><input :disabled="isDisabled" type="text"v-model="form.value10" class="contract-input" /></view><view class="fl a-i-center"><text class="serial-number">公司地址：四川省绵阳市经开区贾家店89号</text></view><view class="fl a-i-center"><text class="serial-number">联系方式：0816—2859598</text></view><view class="content">根据《中华人民共和国合同法》和《中华人民共和国建筑法》及其它有关法律、行政法规，为明确双方在维修过程中的权利、义务，经双方协商自愿签订如下合同条款，以致共同遵守：</view><view class="article">第一条工程项目</view><view class="point">（一）、工程名称：<input :disabled="isDisabled" type="text" class="contract-input" v-model="form.value11" /></view><view class="point">（二）、工程地址：<input :disabled="isDisabled" type="text" class="contract-input" v-model="form.value12" /></view><view class="point">（三）、工程范围：（ 详见“世隆房管”APP施工方案详情）</view><view class="point">（四）、承包方式： 双方商定采取乙方包工、包全部材料;</view><view class="point">（五）、合同价款：￥<input :disabled="isDisabled" type="text" class="date-input" v-model="form.value13" />元，大写(人民币)：<input:disabled="isDisabled" type="text" class="date-input" v-model="form.value14" /></view><view class="article">第二条 工程期限</view><view class="content">本工程经甲乙双方协商一致，总工期<input :disabled="isDisabled" type="text" class="date-input" v-model="form.value15" />天（<input :disabled="isDisabled" type="text" class="date-input" v-model="form.value16" />年<input :disabled="isDisabled" type="text" class="date-input" v-model="form.value17" />月<input :disabled="isDisabled" type="text" class="date-input" v-model="form.value18" />日至<input :disabled="isDisabled" type="text" class="date-input" v-model="form.value19" />年<input :disabled="isDisabled" type="text" class="date-input" v-model="form.value20" />月<input :disabled="isDisabled" type="text" class="date-input" v-model="form.value21" />日</view><view class="article">第三条 工程质量管理及验收</view><view class="page-number">第2页 共{{ pages }}页</view></view><!-- 第三页 --><view class="page" id="contractimage3"><view class="point">（一）、工程具备隐蔽条件，乙方先进行自检，并在隐蔽验收前通知甲方验收。验收合格，甲方现场代表在<text class="keywords">APP</text>验收记录上确认<text class="keywords">签字</text>。验收不合格，乙方予以整改后再交由甲方重新验收。</view><view class="point">（二）、工程具备竣工验收条件，乙方按国家工程竣工验收有关规定，向甲方提供完整竣工资料。验收合格的，双方进行交接，验收不合格的，乙方应及时返工。</view><view class="point">（三）、工程质量应符合国家及行业规定的检验评定的“合格”标准。</view><view class="article">第四条关于工程款项支付的约定</view><view class="point">双方商定本合同价款采用固定价格，甲方分2次支付合同款项：第1次支付合同总价款的<input :disabled="isDisabled" type="text" class="date-input" v-model="form.value22" />% ,竣工验收合格后甲方<text class="keywords">须</text>3个工作日内支付余下总价款。</view><view class="content">甲方应将工程款项通过世隆房管APP线上支付，若甲方将工程款交予乙方其他人员而造成的损失，相关责任由甲方自行负责。</view><view class="content">甲方应严格履行本合同关于工程款项支付的约定，如甲方有违约行为，需向乙方支付工程总价款<text class="keywords">10%</text>的违约金，并承担因此造成的经济损失。</view><view class="article">第五条 其它约定</view><view class="point">（一）、甲方的责任</view><view class="content">1、开工前，与乙方确认施工方案（作法说明，<text class="keywords">详情见APP施工方案</text>）。向乙方提供施工所需的水、电、气及电讯等设备，并说明使用注意事项。办理施工所涉及的各种申请、批件等手续。</view><view class="content">2、指派<input :disabled="isDisabled" type="text" class="date-input" v-model="form.value23" />为甲方驻工地代表，负责合同履行。对工程质量、进度进行监督检查，办理验收、变更、登记手续和其他事宜。</view><view class="page-number">第3页 共{{ pages }}页</view></view><!-- 第四页 --><view class="page" id="contractimage4"><view class="content">3、参与对工程质量、施工进度的监督及对材料进场、工程竣工的验收。甲方应向乙方提供必要的施工条件及所需使用的材料堆放区，负责做好施工现场的安全等工作</view><view class="content">4、工程所在的物业或其他管理单位因施工而收取的各项管理费用，由甲方承担，乙方协助提供物管或其他管理单位所需相关资料。</view><view class="content">5、协调乙方与邻里关系，协助有关部门做好现场安全等工作，并承担相应费用。</view><view class="content">6、在工程施工过程中遇需相关部门及单位审批的施工项目，甲方必须提供相关部门及单位的同意施工相关文件或通知。</view><view class="content">7、未办理合法手续，要求乙方拆改原施工现场管线、重要设施设备及结构主体，由此发生的损失或事故（包括罚款），由甲方负责并承担损失。</view><view class="point">（二）、乙方的责任</view><view class="content">1、根据甲、乙双方确认的施工方案，制定进度计划，交甲方审定。</view><view class="content">2、指派<input :disabled="isDisabled" type="text" class="date-input" v-model="form.value24" />为乙方驻工地代表，负责合同履行。按要求组织施工，保质、保量、按期完成施工任务，解决由乙方负责的各项事宜。</view><view class="content">3、遵守国家或地方政府及有关部门对施工现场管理的规定，严格按照施工方案（作法说明）进行施工，妥善保护好施工现场周围建筑物、设备管线。做好施工现场垃圾消纳等工作，做好各项质量检查记录，加强施工人员的安全教育管理，参加竣工验收。</view><view class="content">4、在工程施工过程中遇需相关部门及单位审批的施工项目，甲方不能提供相关部门及单位的同意施工相关文件或通知，乙方有权拒绝。</view><view class="content">5、由于乙方在施工生产过程中违反有关安全操作规程，导致发生安全事故，乙方应承担由此引发相应的经济损失。</view><view class="page-number">第4页 共{{ pages }}页</view></view><!-- 第五页 --><view class="page" id="contractimage5"><view class="article">第六条 工程保修约定</view><view class="content">施工项目保修期<input :disabled="isDisabled" type="text" class="date-input" v-model="form.value25" />年；</view><view class="content">本施工项目保修期自竣工验收合格之日起计算；②如甲方未按本合同规定按时向乙方支付工程施工费用或因地震、洪灾、在连续24小时内降雨量达到200毫米（含200毫米）以上、在任何6小时内降雪量达到300毫米（含300毫米）以上等特殊情况导致本施工项目出现质量问题的，乙方不予承担保修责任。</view><view class="content keywords">保修期间因人为因素导致施工项目成品及设施而出现的质量问题，乙方不予承担保修责任。</view><view class="article">第七条　纠纷解决办法 </view><view class="content">因本合同产生纠纷，如协商无法解决，双方均有权向乙方所在地人民法院提起诉讼。</view><view class="article">第八条附则</view><view class="content">本合同一式二份，甲乙双方各执一份，自双方签字，后生效。</view><view class="fl jc-between"><view class="signature"><input :disabled="isDisabled" type="text" v-model="form.value28" class="date-input" /><text class="serial-number">年</text><input :disabled="isDisabled" type="text" v-model="form.value29" class="date-input-sm" /><text class="serial-number">月</text><input :disabled="isDisabled" type="text" class="date-input-sm" v-model="form.value30" /><text class="serial-number">日</text></view><view class="signature"><view class="fl a-i-center"><text class="serial-number">乙方：</text><text class="company">四川房管家信息科技有限公司</text></view><view class="fl a-i-center"><text class="serial-number">负责人：</text><input :disabled="isDisabled" type="text" class="date-input-ml"v-model="form.value31" /></view><input :disabled="isDisabled" type="text" class="date-input" v-model="form.value32" /><text class="serial-number">年</text><input :disabled="isDisabled" type="text" class="date-input-sm" v-model="form.value33" /><text class="serial-number">月</text><input :disabled="isDisabled" type="text" class="date-input-sm" v-model="form.value34" /><text class="serial-number">日</text></view></view><view class="page-number">第5页 共{{ pages }}页</view></view></view>
</template><script>export default {data() {return {img: '',isDisabled: true,pages: 2,form: {value1: 'value1',value2: 'value2',value3: 'value3',value4: 'value4',value5: 'value5',value6: 'value6',value7: 'value7',value8: 'value8',value9: 'value9',value10: 'value10',value11: 'value11',value12: 'value12',value13: 'value13',value14: 'value14',value15: 'value15',value16: 'value16',value17: 'value17',value18: 'value18',value18: 'value18',value19: 'value19',value20: 'value20',value21: 'value21',value22: 'value22',value23: 'value23',value24: 'value24',value25: 'value25',value26: 'value26',value27: 'value27',value28: 'value28',value29: 'value29',value30: 'value30',value31: 'value31',value32: 'value32',value33: 'value33',value34: 'value34',}}},methods: {showLoading() {uni.showLoading({title: '加载中……',mask: true})},hideLoading() {uni.hideLoading()},renderFinish(opt) {// console.log(opt.path)console.log(opt.el)this.img = opt.path// 获取到图片地址（base64）// DoSomeThing ……},}}
</script><script module="html2canvas" lang="renderjs">import html2canvas from 'html2canvas';export default {methods: {emitData() {// 根据自己需要截图区域this.create('contractimage4');},async create(id) {if(!id) {return false;}try {this.$ownerInstance.callMethod('showLoading', true);const timeout = setTimeout(async () => {const domId = document.getElementById(id);const canvas = await html2canvas(domId, {width: domId.offsetWidth, //设置canvas尺寸与所截图尺寸相同，防止白边height: domId.offsetHeight, //防止白边logging: true,useCORS: true});const base64 = canvas.toDataURL('image/jpeg', 1);this.$ownerInstance.callMethod('renderFinish', {path: base64,el: id});clearTimeout(timeout);}, 500);} catch (error) {console.log(error)}}}}
</script><style lang="scss" scoped>/** @import "~@/common/style/contract.scss";* 这样引用的样式好像会出现白屏的问题*/ .contract {padding: 0 30rpx;font-family: '宋体';}.sign {width: 100rpx;height: 50rpx;}.page {width: 690rpx;// width: 570rpx;padding: 113rpx 0rpx;height: 1060rpx;// outline: 1rpx solid red;position: relative;// margin-top: 100rpx;}.page-number {position: absolute;bottom: 20rpx;left: 0;right: 0;margin-top: 15rpx;font-size: 24rpx;text-align: center;color: #666;}.fl {display: flex;}.jc-center {justify-content: center;}.jc-between {justify-content: space-between;}.a-i-center {align-items: center;}.text-center {text-align: center;}// 合同输入框（较长）.contract-input {min-width: 100rpx;border-bottom: 1rpx solid #000;}// 数量输入框（较短）.date-input {width: 100rpx;border-bottom: 1rpx solid #000;display: inline-block;}.date-input-sm {width: 50rpx;border-bottom: 1rpx solid #000;display: inline-block;}.date-input-ml {width: 140rpx;border-bottom: 1rpx solid #000;display: inline-block;}// 详细类容.content {text-indent: 2em;font-size: 24rpx;line-height: 1.5em;}.merge-content {text-indent: 0 !important;}.keywords {color: #666;}// 编号.serial-number {font-size: 26rpx;font-weight: bold;}// 合同名称.contract-name {width: 600rpx;font-size: 40rpx;font-weight: bold;margin: 200rpx auto;}// 第xx条.article {// font-size: 28rpx;font-size: 26rpx;font-weight: bold;text-indent: 2em;line-height: 2em;}// (xx)点.point {// font-size: 26rpx;font-size: 26rpx;line-height: 50upx;font-weight: bold;text-indent: 2em;}.signature {width: 50%;margin-top: 50rpx;flex: 1;&:last-child {padding-bottom: 100rpx;}}.company {font-size: 24rpx;}input {// padding: 0;text-indent: 0;font-size: 24rpx;}.over-ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
</style>

注意：在生成的图片是base64，虽然可以通过插件将base64转为图片，但是图片过多的时候转化的速度很慢，建议上传的时候直接上传base64让后端转

uniapp中页面元素转图片APP端相关推荐

uniapp中的分享功能实现(APP,小程序，公众号)
uniapp中的分享功能实现(APP,小程序,公众号) 1.APP端的分享 app端的分享可以直接使用uniapp封装的方法uni.share,uni-app的App引擎已经封装了微信.QQ.微博的分 ...
uni-app 全局消息通知弹窗（App端）
uni-app 全局消息通知弹窗(App端) 实现效果实现一个顶部的全局消息通知,并且可以常驻,除非手动关闭. 效果图如下收到告警通知弹窗从顶部向下弹出,可点击跳转到对应页面,可上滑关闭弹窗,弹 ...
uniapp中自定义生成海报图片
uniapp中自定义生成海报图片效果示例图效果示例图 ##代码块 <template><view class="cardPoster-wrap">< ...
uniapp中canvas将矩形图片绘制成圆形图片以及保存canvas到手机
废话不多说直接上代码本次是在uniapp中操作的但是canvas都一样前提是你已经赋予了canvas宽高了 //先获取你的canvas let ctx = uni.createCanvasCon ...
uni-app设置页面的背景图片
可以通过设置view的background或者background-image属性来实现: <template><view class="content" :st ...
uniapp中使用ucharts组件开发App中的折线图流程
uniapp中使用ucharts组件开发流程官方ucharts地址我是在uniapp使用echarts后发现在安卓手机app上不显示,所以使用ucharts来代替echarts 组件地址在这里导 ...
uniAPP 自定义页面导航烂 - 搜索 APP有效
这里自定义的是页面的一个导航栏啊 ,所以会覆盖掉全局的一个导航栏: pages.json 里面设置 pages 中的页面,, stayle 中的页面属性 app-plus: appp ...
uniapp中H5网页和打包app分别生成二维码
一.h5网页中生成二维码业务引入"qrcodejs2.js":npm install qrcodejs2: <template><view><vie ...
【uniapp】uniapp中页面传值方式总结
1.传递一个或多个参数在跳转页面的路由后添加"?"后开始写自己需要传递的参数名,如代码中的buyId,由于这里是使用 ` ,即反引号,所以使用${}作占位符,而不需要字符串拼接, ...

uniapp中页面元素转图片APP端

uniapp中页面元素转图片APP端相关推荐

最新文章

热门文章