小程序页面转pdf时如何实现自动分页

前言

最近接了个新需求，需要在前端实现页面转pdf，因为之前没接触过，所以百度了下，最终采用了wxml2canvas插件来实现页面内容转canvas转图片，最后调后端接口转pdf；做完测试后发现，因为pdf可能会存在多页，所以需要前端进行分页处理，即根据A4纸张高度分出多张图片给后端组成pdf，这下就犯难了，苦思了一天，终于想到了一个解决方案。

一、设置页面小模块标记

1.首先，初始化将页面根据纸张高度来划分几页，在onReady用wx.createSelectorQuery()根据选择器获取整个页面的高度；用页面高度除纸张高度取一个数组，剩余不足纸张高度的取剩余高度，得到总页数

代码如下（示例）：

onReady() {
        let query = wx.createSelectorQuery()
                // 根据选择器取元素宽高坐标
        query.select('.pages').boundingClientRect(res => {
            // 设置初始值取数组长度
            let count = 0
            // 设置数组存分页
            let list = []
            this.setData({
                height: res.height
            })
            // 当元素高度大于固定纸张高度时，用页面高度除纸张高度取数组
            if (res.height >= 842) {
                count = res.height / 842 + ''
                // 若除后带小数点，进行分割处理并对有小数点的数据进行加1，需要注意的是，分割不能作用于number类型数据，所以我们强转字符串
                count = count.split('.')[1] ? parseInt(count.split('.')[0]) + 1 : count.split('.')[0]
                for (var i = 0; i < count; i++) {
                    // 除最大下标外其他循环push数组取固定纸张高度，最大下标取剩余高度
                    if (parseInt(i) + 1 < count) list.push({
                        height: 842,
                        width: res.width,
                        pageNo: i + 1
                    })
                    else list.push({
                        height: res.height - (842 * i),
                        width: res.width,
                        pageNo: i + 1
                    })
                }
            } else {
                // 元素高度小于纸张高度直接取元素高度
                list.push({
                    height: res.height,
                    width: res.width,
                    pageNo: 1
                })
            }
            this.setData({
                list
            })
        }).exec()

2. 初始化数组后，根据固定高度分出的页面可能会把图片或者文字截成两半，这显然不是我们想要的效果，所以，我们需要设置小模块（页面内的data-type和data-text是wxml2canvas所需的语法，需要实现页面转图片的可以百度wxml2canvas），并利用小模块对数组内每页的高度进行动态处理

WXML：

<view class="list pages fs24 cr_666 pt20">
    <view class="ti_2 draw_canvas pb10" data-type="text" data-text="亲爱的客户：">
        亲爱的客户：</view>
    <view class="ti_2 pb10 draw_canvas" data-type="text" data-text="首先，初始化将页面根据纸张高度来划分几页，在onReady用wx.createSelectorQuery()根据选择器获取整个页面的高度；用页面高度除纸张高度取一个数组，剩余不足纸张高度的取剩余高度，得到总页数">
        首先，初始化将页面根据纸张高度来划分几页，在onReady用wx.createSelectorQuery()根据选择器获取整个页面的高度；用页面高度除纸张高度取一个数组，剩余不足纸张高度的取剩余高度，得到总页数
    </view>
    <view class="ti_2 pb10 draw_canvas" data-type="text" data-text="预约方式、办理地址与电话：">预约方式、办理地址与电话：</view>
    <view class="ti_2 pb10 draw_canvas" data-type="text" data-text="首先，初始化将页面根据纸张高度来划分几页，在onReady用wx.createSelectorQuery()根据选择器获取整个页面的高度；用页面高度除纸张高度取一个数组，剩余不足纸张高度的取剩余高度，得到总页数">
        首先，初始化将页面根据纸张高度来划分几页，在onReady用wx.createSelectorQuery()根据选择器获取整个页面的高度；用页面高度除纸张高度取一个数组，剩余不足纸张高度的取剩余高度，得到总页数
    </view>
    <view class="ti_2 pb10 draw_canvas" data-type="text" data-text="首先，初始化将页面根据纸张高度来划分几页，在onReady用wx.createSelectorQuery()根据选择器获取整个页面的高度；用页面高度除纸张高度取一个数组，剩余不足纸张高度的取剩余高度，得到总页数">
        首先，初始化将页面根据纸张高度来划分几页，在onReady用wx.createSelectorQuery()根据选择器获取整个页面的高度；用页面高度除纸张高度取一个数组，剩余不足纸张高度的取剩余高度，得到总页数
    </view>
</view>

js：

onReady() {
        let query2 = wx.createSelectorQuery()
        // 根据selectAll取到所有小模块宽高坐标
        query2.selectAll('.draw_canvas').boundingClientRect(r => {
            this.lineFeedPdf(r)
        }).exec()
},
// 根据A4纸张大小对页面进行自动分页
    lineFeedPdf(e) {
        let list = [...this.data.list]
        // 用变量接收小模块数组距上高度
        let count = 0
        // 用变量控制小模块数组下标
        let index = 0
        // 每循环一次累加每页实际高度
        let sum = 0
        let arr = []
        for (var i in list) {
            for (var idx = index; idx < e.length; idx++) {
                // 取每页的距上高度
                count = e[idx].top - sum
                if (count >= 842) {
                    // 最大下标的高度小于纸张高度情况下
                    if (list[i].height < 842 && parseInt(i) + 1 == list.length) {
                        // 总高度减去累加的每页实际高度
                        let cou = this.data.height - sum
                        // 若最大下标高度累加每次纸张高度减实际高度的剩余高度大于纸张高度，用新数组push新的剩余高度，最后嵌入list
                        if (cou >= 842) {
                            arr.push({
                                height: (this.data.height - sum - list[i].height),
                                width: list[i].width,
                                pageNo: parseInt(i) + 2
                            })
                        } else {
                            list[i].height = cou
                        }
                    }
                    // 取每页的实际高度
                    list[i].height = e[idx - 1].top - sum
                    sum += list[i].height
                    index = idx
                    break
                } else if (count < 842 && idx + 1 == e.length && parseInt(i) + 1 == list.length) {
                    // 若在双重循环的最后count还小于纸张高度，取剩余高度
                    list[i].height = this.data.height - sum
                }
            }
        }
        this.setData({
            list: list.concat(arr)
        })
    }

二、引入Wxml2Canvas，根据页面生成canvas并转图片

做完上一步之后，我们引入Wxml2Canvas（具体如何引入看这个链接：https://blog.csdn.net/edwardwzw/article/details/122471604)，并利用数组生成图片数组

    // 根据页面生成canvas并转图片
    getPosterHandle(id, sum, arr) {
        const that = this
        // 实例化Wxml2Canvas
        let drawImage = new Wxml2Canvas({
            element: 'share' + id, // canvas节点的id,这里我的节点id是动态的，我在页面对canvas标签进行了循环
            obj: that, // 在组件中使用时，需要传入当前组件的this
            width: this.data.list[id].width * 2, // 宽高
            height: this.data.list[id].height * 2,
            // 距上高度，这里采用负数，可以实现每页内容不重复不重叠
            translateY: sum ? -sum : sum,
            // 这个一定要设置，插件取的默认值是窗口高度与实例高度的比例
            zoom: 1,
            // 返回成功方法
            finish(url) {
                arr.push(
                    url,
                )
                // 若下标加1小于数组长度，递归该方法
                if (id + 1 < that.data.list.length) {
                    that.getPosterHandle(id + 1, sum += that.data.list[id].height, arr)
                } else {
                    // 若下标等于数组长度，保存图片数组
                    that.setData({
                        arr
                    })
                }
            },
            error(res) {
                console.log(res);
            }
        });
        let data = {
            list: [{
                type: 'wxml',
                class: '.pages .draw_canvas',
                limit: '.pages',
                x: 0,
                y: 0
            }]
        }
        //传入数据，画制canvas图片
        drawImage.draw(data, that);
    },

补充

有一个点补充下，到这里页面效果还没有完全实现，需要去Wxml2Canvas插件的index.js内找到_drawText方法，注释掉“item.y = this._resetPositionY(item, style, textHeight);”，这样效果就出来了，具体原因不太清楚，作者也没完全熟悉这个插件，之后有时间可以看下原因