<template> <view style="position: fixed;top:0; left: 100%;" :style="canvasStyle"> <canvas :style="canvasStyle" canvas-id="confirmBillDetail" ></canvas> </view> </template> <script> export default { data() { return { serial_number: '', custom_name: '', goodsList: [], total_num: 0, total_piece: 0, userName: '', userMobile: '', useHeight: 3508, billTitle: '' } }, computed: { // useHeight() { // return 300 + (this.goodsList.length - 1) * 50 // }, canvasStyle() { return 'width:2479px; height:' + this.useHeight + 'px;' } }, methods: { init(option) { let param = option console.log("param", param) this.dataInit(param) }, createPic() { console.log('方法执行了') let that = this let cxt = null; let ctx = uni.createCanvasContext('confirmBillDetail', that) // uni.createSelectorQuery() // .select("#confirmBillDetail") // .context(function(res){ // ctx = res.context // }) // .exec(); console.log('cxt',ctx) let l0 = 5;  let l1 = 30;  let l2 = 930;  let l3 = 1280;  let l4 = 1680;  let l5 = 2030;  let l6 = 2474;  let lc = 600;  let t1 = 100;  let t2 = 180;  let t3 = 280;  let t4 = 330;  let t5 = 380; let t6 = 530; ctx.font = "50px sans-serif" ctx.fillText(this.billTitle, lc, t1) ctx.font = "40px sans-serif" ctx.fillText('订单编号：' + this.serial_number, l1, t2) ctx.fillText('客户名称：' + this.custom_name, l1, t3) ctx.moveTo(l0, t4) ctx.lineTo(l6, t4) ctx.stroke() ctx.fillText('商品编码/名称', l1, t5) ctx.fillText('主单位', l2, t5) ctx.fillText('主数量', l3, t5) ctx.fillText('辅单位', l4, t5) ctx.fillText('辅数量', l5, t5) console.log('2222') this.goodsList.map((item, index) => { // ctx.font = "12px sans-serif" let list_t = (index * 150 + t6); let goods_t1 = list_t - 20, goods_t2 = list_t + 20 ctx.fillText(item.goods_code, l1, goods_t1) ctx.fillText(item.goods_name, l1, goods_t2) // ctx.font = "20px sans-serif" ctx.fillText(item.goods_unit, l2, list_t) ctx.fillText(item.good_num, l3, list_t) ctx.fillText(item.goods_sale_unit, l4, list_t) ctx.fillText(item.goods_piece, l5, list_t) }) console.log('3333') let goodsLength = this.goodsList.length * 150 + t6 - 85 ctx.moveTo(5, goodsLength) ctx.lineTo(2474, goodsLength) ctx.stroke() let t7 = goodsLength + 50; let t8 = t7 + 100 let lt1 = t1 + 160, lt2 = lt1 + 200; ctx.fillText('合计：', l1, t7) ctx.fillText('  ', l2, t7) ctx.fillText(this.total_num, l3, t7) ctx.fillText(' ', l4, t7) ctx.fillText(this.total_piece, l5, t7) ctx.fillText('业务员：', l1, t8) ctx.fillText(this.userName, lt1, t8) ctx.fillText(this.userMobile, lt2, t8) // this.useHeight = this.useHeight + goodsLength console.log('4444') ctx.draw(false, (()=> { console.log("this.canvasStyle", this.canvasStyle) uni.canvasToTempFilePath({ canvasId: 'confirmBillDetail', destWidth: 2479, destHeight: 3508, success: function(res) { // 在H5平台下，tempFilePath 为 base64 console.log('生成的路径', res.tempFilePath) uni.uploadFile({ url: that.$url.upload, filePath: res.tempFilePath, name: 'file', header: { token: that.$store.state.token, version: '10.00.0' }, success: function(res){ console.log("resshangchuanchenggong", JSON.parse(res.data).url) console.log("that.useHeight", that.useHeight) that.$emit('detailUrl', {url:JSON.parse(res.data).url, goodsLength: that.goodsList.length}) }, fail: function(res) { console.log("shangchuanshibai", res) } }) }, fail: function(res) { console.log("失败了", res) }, complete: function(res) { console.log("res", res) } }, that) })()) }, dataInit(e) { console.log("初始化待处理数据", e) //合同标题 this.billTitle = e.detailData.custom_name + '客户收货确认函' console.log("this.billTitle", this.billTitle) //订单编号 this.serial_number = e.detailData.serial_number //客户名称 this.custom_name = e.detailData.custom_name //商品列表 this.goodsList = e.detailData.goodsList //总主数量 this.total_num = e.detailData.total_number this.total_piece=0; //总辅数量 e.detailData.goodsList.map(item => { this.total_piece+=+item.goods_piece||0 }) //业务员名称 this.userName = e.detailData.user_name //业务员手机号 this.userMobile = e.detailData.mobile return this.createPic() } } } </script>

编译一直空白 微信编辑器版本1.062206090，hbuilderx 3.4.15