wxml2canvas爬坑之路

﹏ヽ暗。殇╰゛Y 2024-03-16 17:42 54阅读 0赞

效果图：

![7444408e02ba04872eeb157322d698d9.png][]

前提：

公司要求生成一分报告并转为图片并保存，之前用canvas画过，但这次是在不想用canvas一点点画了，再往上找了n久，爬了n多坑，终于搞出来了

插件：

wxml2canvas

一：下载插件

npm install wxml2canvas

二：构建npm

微信开发者工具： 工具 --> 构建npm

三：使用

import Wxml2Canvas from 'wxml2canvas'

好了，坑开始了！！！！！！！！！！！！

**坑一：引入一直报错**

解决方法

重新下载了好几次wxml2canvas，又清了缓存n次

总结：微信开发者工具太辣鸡了

**坑二：文字不换行**

解决方法：

data-type="inline-text"

text标签的 data-type 由 text 修改为 inline-text

**坑三：文字按整个canvas的宽度来换行，超过的部位还被裁了**

![6f23c2366fb35ee25c29be09bf8012e5.png][]

解决方法：手动换行

计算这里一行最多可以放几个文字，然后把这一段文本分割成几行，最后循环遍历显示

![f154431bac85d64df8e65a852acf2ba4.gif][]

<view class="function">
         <text class="my_draw_canvas" wx:for="{
      {instructionTextList}}" wx:key="index" data-type="inline-text" data-text="{
      {item}}">
                          {
      {item}}
          </text>
           
    </view>

![3d99d25bc3ba9e97fd5cedd111584961.gif][]

**坑四：最后的图片不显示wxss中写的border代码**

![ef7f61d0fee94ffc8f9653dc2c2306d9.png][]

解决方法:

![7529111b9219121aabe5b5e48938ec3b.gif][]

![e9638277d0bbbf5824e02246c3ca5422.gif][]

**坑五：不同型号手机显示错位**

好不容易填了一下第四个坑，但是屏幕越大的手机，线条往右下方偏移越严重

**希望的样式：（12pro）**

![7c64d1db291b25157713ddaae13fad43.png][]

(13pro) (ipad)

![7aab0f78fff48e6894646994b00c824d.png][]

以上我感觉是不能用 type: 'line' 一条条地画了，搞了整整两三天，最终放弃

最后解决方法：在需要画线的地方，插入一个view当做一条线

以上，线条可以在不同型号、版本的手机上完美呈现

然而，坑依然没有结束！！！！！！！！！！！！！

**坑六：下载后图片不显示**

因为写静态页面的时候都是引入本地的图片，所以点击导出的时候是完全没有问题的，但是换成了后台动态数据，要根据地址去显示服务器上的图片的时候，就开始作妖了！！！！！

解决方法：先把图片下载至本地

![a3e9759a9afe54bb4938adee4b47787a.gif][]

wx.downloadFile({
          url: `图片地址`,
          success: function(res){
            let leftLogo = res.tempFilePath
            if(res.dataLength > 0){
              that.setData({
                leftLogo:leftLogo,
              })
            }else{
              that.setData({
                leftLogo:"",
              })
            }
            
          },
          fail: function (error) {
            wx.showToast({
              title: "预下载左侧logo失败",
              icon: 'none'
            })
          }
        })

![17b5080495f8412c81f111c6b1318c03.gif][]

以上就是我画图的所有心累里程

后续还有两个bug没解决：

bug一：微信开发者工具中导出图片有问题，但手机上没问题

（电脑）　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　（手机）

![ad7236fed4cf9da6193df5279eb76a73.png][]

bug二：手机上有问题，电脑上没有

（电脑）　　　　　　　　　　　　　　　　　　　　　　　　　　(手机)

![1b6c39d8d0d8eb44b68e60724ec03452.png][]

[7444408e02ba04872eeb157322d698d9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/26c2f01b6aae4a8e9faef576104b919b.png
[6f23c2366fb35ee25c29be09bf8012e5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/c867a764b5324f398827462e38a2551f.png
[f154431bac85d64df8e65a852acf2ba4.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/ce4d28f416c24c68a229e594980e98b2.png
[3d99d25bc3ba9e97fd5cedd111584961.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/727cf22dbb50498db5d85ee083dadfaf.png
[ef7f61d0fee94ffc8f9653dc2c2306d9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/69202f24eba44ef8b66158664e138bfa.png
[7529111b9219121aabe5b5e48938ec3b.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/caa2e3a1cf1747db8b59c372e8ce7681.png
[e9638277d0bbbf5824e02246c3ca5422.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/cd2302f795f3463db072fd9914cd4847.png
[7c64d1db291b25157713ddaae13fad43.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/24206e9ab1224ee1b62e0459b700f48d.png
[7aab0f78fff48e6894646994b00c824d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/d7ae859f071045d4b820d6d0310594f5.png
[a3e9759a9afe54bb4938adee4b47787a.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/e830a3076a9b41de8ca4a062ce510498.png
[17b5080495f8412c81f111c6b1318c03.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/86d0f70f4d554bcdb003d8313ac429c8.png
[ad7236fed4cf9da6193df5279eb76a73.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/1ce6b8f2f12b4748bcec657f33fb9fe0.png
[1b6c39d8d0d8eb44b68e60724ec03452.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/55c3039d64854efeaf86563feac5c943.png