uniapp中页面元素转图片APP端 |
您所在的位置：网站首页 › html怎么转化成图片 › uniapp中页面元素转图片APP端 |
uniapp中页面元素转图片APP端
|
页面效果（具体样式自己调整） 截图效果
原本app端是无法使用html2canvas的因为，app端不支持浏览器查找dom节点，如果使用会报错， 不过我在uniapp里面看到了renderjs（一个运行在视图层的js）。使用这个就可以帮助我们在app端内使用浏览器对象了。这样html2canvas也就可以实现了。 下载 编号： 四川房管家信息科技有限公司施工合同 甲方： 乙方：四川房管家信息科技有限公司 签订日期： 年 月 日 第1页 共{{ pages }}页 甲方： 负责人： 地址： 联系方式： 乙方：四川房管家信息科技有限公司 公司负责人： 公司地址：四川省绵阳市经开区贾家店89号 联系方式：0816—2859598 根据《中华人民共和国合同法》和《中华人民共和国建筑法》及其它有关法律、行政法规，为明确双方在维修过程中的权利、义务， 经双方协商自愿签订如下合同条款，以致共同遵守： 第一条工程项目 （一）、工程名称： （二）、工程地址： （三）、工程范围：（ 详见“世隆房管”APP施工方案详情） （四）、承包方式： 双方商定采取乙方包工、包全部材料; （五）、合同价款：￥元，大写(人民币)： 第二条 工程期限 本工程经甲乙双方协商一致，总工期 天（年 月 日至 年 月 日 第三条 工程质量管理及验收 第2页 共{{ pages }}页 （一）、工程具备隐蔽条件，乙方先进行自检，并在隐蔽验收前通知甲方验收。验收合格，甲方现场代表在 APP验收记录上确认 签字。验收不合格，乙方予以整改后再交由甲方重新验收。 （二）、工程具备竣工验收条件，乙方按国家工程竣工验收有关规定，向甲方提供完整竣工资料。验收合格的，双方进行交接，验收不合格的，乙方应及时返工。 （三）、工程质量应符合国家及行业规定的检验评定的“合格”标准。 第四条关于工程款项支付的约定 双方商定本合同价款采用固定价格，甲方分2次支付合同款项：第1次支付合同总价款的 % ,竣工验收合格后甲方 须3个工作日内支付余下总价款。 甲方应将工程款项通过世隆房管APP线上支付，若甲方将工程款交予乙方其他人员而造成的损失，相关责任由甲方自行负责。 甲方应严格履行本合同关于工程款项支付的约定，如甲方有违约行为，需向乙方支付工程总价款10%的违约金，并承担因此造成的经济损失。 第五条 其它约定 （一）、甲方的责任 1、开工前，与乙方确认施工方案（作法说明，详情见APP施工方案）。 向乙方提供施工所需的水、电、气及电讯等设备，并说明使用注意事项。办理施工所涉及的各种申请、批件等手续。 2、指派 为甲方驻工地代表，负责合同履行。对工程质量、进度进行监督检查，办理验收、变更、登记手续和其他事宜。 第3页 共{{ pages }}页 3、参与对工程质量、施工进度的监督及对材料进场、工程竣工的验收。甲方应向乙方提供必要的施工条件及所需使用的材料堆放区，负责做好施工现场的安全等工作 4、工程所在的物业或其他管理单位因施工而收取的各项管理费用，由甲方承担，乙方协助提供物管或其他管理单位所需相关资料。 5、协调乙方与邻里关系，协助有关部门做好现场安全等工作，并承担相应费用。 6、在工程施工过程中遇需相关部门及单位审批的施工项目，甲方必须提供相关部门及单位的同意施工相关文件或通知。 7、未办理合法手续，要求乙方拆改原施工现场管线、重要设施设备及结构主体，由此发生的损失或事故（包括罚款），由甲方负责并承担损失。 （二）、乙方的责任 1、根据甲、乙双方确认的施工方案，制定进度计划，交甲方审定。 2、指派 为乙方驻工地代表，负责合同履行。按要求组织施工，保质、保量、按期完成施工任务，解决由乙方负责的各项事宜。 3、遵守国家或地方政府及有关部门对施工现场管理的规定，严格按照施工方案（作法说明）进行施工，妥善保护好 施工现场周围建筑物、设备管线。做好施工现场垃圾消纳等工作，做好各项质量检查记录，加强施工人员的安全教育管理，参加竣工验收。 4、在工程施工过程中遇需相关部门及单位审批的施工项目，甲方不能提供相关部门及单位的同意施工相关文件或通知，乙方有权拒绝。 5、由于乙方在施工生产过程中违反有关安全操作规程，导致发生安全事故，乙方应承担由此引发相应的经济损失。 第4页 共{{ pages }}页 第六条 工程保修约定 施工项目保修期年； 本施工项目保修期自竣工验收合格之日起计算；②如甲方未按本合同规定按时向乙方支付工程施工费用或因地震、洪灾、在连续24小时内降雨量达到200毫米（含200毫米）以上、 在任何6小时内降雪量达到300毫米（含300毫米）以上等特殊情况导致本施工项目出现质量问题的，乙方不予承担保修责任。 保修期间因人为因素导致施工项目成品及设施而出现的质量问题，乙方不予承担保修责任。 第七条 纠纷解决办法 因本合同产生纠纷，如协商无法解决，双方均有权向乙方所在地人民法院提起诉讼。 第八条附则 本合同一式二份，甲乙双方各执一份，自双方签字，后生效。 年 月 日 乙方：四川房管家信息科技有限公司 负责人： 年 月 日 第5页 共{{ pages }}页 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 …… }, } } 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) } } } } /* * @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; }注意： 在生成的图片是base64，虽然可以通过插件将base64转为图片，但是图片过多的时候转化的速度很慢，建议上传的时候直接上传base64让后端转 |
【本文地址】
今日新闻 |
推荐新闻 |