项目场景：

最近有小伙伴问了一个问题，那就是微信小程序云开发如何将页面生成为pdf？但是在没有后端工程师的协助下，我们要怎么办了？

解决方案：

于是便逛了一下微信社区，但很遗憾腾讯baba没有给出相应的api或解决方案，好在有神奇的留言，最终找到了关键词，那就是wxml→canvas→img→pdf，wxml转化转化成canvas之后在生成img，微信官方已经给出了组件wxml-to-canvas可以解决，那么img转化成pdf要怎么办呢？可以用pdf-lib，好在看到了黄宝～这位大佬的文章，省去了很多时间去理解文档。

效果图：

可以从GIF中看到，我已经把要用到的功能都写完善了，点击生成pdf后会生成一张图片存到云服务器，之后会调用云函数把图片转换成pdf文件并上传到云服务器（转换后其实可以把多余的图片删了，但是为了直观一点我就不处理了），这样我们就可以拿云服务器上https链接来用了。因为小程序还不支持把pdf文件保存到手机上，所以只能自己复制链接去浏览器下载了。

在实机上，微信会提供预览功能但是不可以直接下载，自己复制下载链接到浏览器下载就好。

Demo部分：

代码我就不粘出来了，有点多，需要的话有积分可以下载CSDN的，没有的话下载百度云的就好。

CSDN=》传送门
百度网盘=》提取码：agvk =》传送门

下载代码 Demo后，导入项目时用自己开通过云开发的AppID就好

接着把app.js里的云环境id换成你自己的，

接着打开img-to-pdf云函数里的index.js文件，把云环境id换成你自己的，

最后就是上传云函数了，务必记得上传，上传完就可以用了。

另外img-to-pdf云函数里的node包里安装了pdf-lib，为了方便本地测试，我就不删除了。代码的话主要部分都写了注释，问题不大，应该都能看懂。

动态设置参数：

因为这的wxml是一串字符串，所以不能向样式那样通过点的形式去更新，所以如果需要动态设置参数的话，需要把字符串标签提取出来写在renderToCanvas方法里，如果数据是数组对象类型，那么用for循环拼接一下字符就好了，字符串拼接可以参考这篇文章=》传送门

const {style} = require('./wxml.js');Page({data: {src: ''},onLoad() {// 为了美观，把画布的宽度设置成屏幕的100%style.container.width = wx.getSystemInfoSync().windowWidth;// 获取wxml-to-canvas组件的节点this.widget = this.selectComponent('.widget')// 模拟调用接口setTimeout(() => {// 假设从后端获取到了数据let name = "weianl"this.renderToCanvas(name)})},// 把页面数据渲染到canvasrenderToCanvas(name) {const wxml = `<view class="container"><view class="item-box red"><text class="text">${name}</text></view><view class="arrows"><text class="text">↓</text></view><view class="item-box green"><text class="text">cavans ☛ img</text></view><view class="arrows"><text class="text">↓</text></view><view class="item-box blue"><text class="text">img ☛ pdf</text></view></view>`this.widget.renderToCanvas({wxml,style}).then((res) => {// console.log('container', res.layoutBox)this.container = res}).catch(err => {// console.log(err)// 防止canvas组件没有初始化完成setTimeout(() => {this.renderToCanvas(name)}, 100);})},// 生成pdfcreatePDF() {wx.showLoading({title: '生成中',})this.widget.canvasToTempFilePath().then(res => {console.log(res)let tempFilePath = res.tempFilePath;// 定义存放到云服务器的文件夹及图片名字const cloudPath = 'wxmlToPdf-img/' + parseInt(new Date().getTime() / 1000) + '.png';// 把图片上传到云服务器wx.cloud.uploadFile({cloudPath: cloudPath,filePath: tempFilePath, // 文件路径}).then(res => {console.log(res)// 调用图片转化PDF云函数wx.cloud.callFunction({name: 'img-to-pdf',data: {width: this.container.layoutBox.width,height: this.container.layoutBox.height,fileID_img: res.fileID}}).then(res => {console.log(res)wx.hideLoading()this.setData({fileID_pdf: res.result.data.fileID,https_pdf: res.result.data.pdf})wx.showToast({title: '生成成功！',icon: 'none'})})}).catch(error => {// handle error})})},// 预览PDFpreviewPDF() {// pdf文件在云服务器的idlet fileID_pdf = this.data.fileID_pdf;// console.log(fileID_pdf)if (!fileID_pdf) {wx.showToast({title: '请先生成PDF',icon: 'none'})return false;}wx.showLoading({title: '加载中',})wx.cloud.downloadFile({fileID: fileID_pdf}).then(res => {// console.log(res)wx.openDocument({filePath: res.tempFilePath,success: function (res) {wx.hideLoading();}})}).catch(error => {// handle error})},// 复制PDF链接copyPDF() {// PDF文件在云服务器上的https链接let https_pdf = this.data.https_pdf;// console.log(https_pdf)if (!https_pdf) {wx.showToast({title: '请先生成PDF',icon: 'none'})return false;}wx.setClipboardData({data: https_pdf,success(res) {wx.showToast({title: '复制成功，快到浏览器打开/下载！',icon: 'none',duration: 3000})}})}})

最后想补习云函数的可以点击这里哦！！传送门

微信小程序云开发如何将页面生成为pdf?相关推荐

【微信小程序】如何获取微信小程序云开发数据库的数据并渲染到页面？
前言上一篇博客我把微信小程序云开发数据库操作(增删改查)的实现方法都已经分享出来啦,可以戳链接进去阅读哦 [微信小程序]小程序云开发实现数据库增删改查(小白速度Get起来!!一步步教你如何实现) 基 ...
微信小程序云开发（2）——在页面显示云数据库的数据
微信小程序云数据库的查询可以参考"微信小程序云开发(1)" 在页面显示数据库里的数据在"pages/index/index.wxml"文件中输入以下代码: & ...
微信小程序云开发不完全指北
微信小程序云开发不完全指北首先必须说明云开发的"云"并不是类似云玩家里的云的意思,而是微信小程序真的提供了云开发的接口以及一个简单的提供存储.数据库服务的虚拟后台(对于一些轻量小 ...
微信小程序云开发用户身份登录_你必须要掌握的微信小程序云开发
微信小程序开发已经成为目前最火爆的技能之一,无论是在求职.毕设.兴趣培养等方面都已经成为一项必备技能,而小程序云开发技术的出现更是点燃了整个小程序生态圈. 在2019微信公开课PRO小程序分论坛上,腾 ...
基于微信小程序云开发（校园许愿墙app）2.0稳定版，以发布上线
大家好~我是c站的一个小博主,我会定期更新博文,本篇是围绕微信小程序基于腾讯云开发展开的一个项目,如果看着还不错,或者对您有帮助的话,可以进我的专栏看看我的小程序的其他作品https://blog.c ...
微信小程序云开发实战：网上商城（二）
微信小程序云开发实战:网上商城(二) 主页面入口页面云函数与云数据库代码实现云端实现小程序端实现选择UI组件库 WeUI Vant 整合UI组件库以扩展包的方式引入weui 接下来主页 ...
怎么实现微信小程序云开发拼团功能？
[微信云开发教程]怎么实现微信小程序云开发拼团功能? 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录 [微 ...
微信小程序云开发 · 从0搭建商业级校园跑腿平台（已开源）
微信小程序云开发 · 从零搭建商业级校园跑腿平台小秃僧新生代农民工,一枚准毕业的大四学生,热爱前端开发,做个有态度.有思想.有价值的公众号. 好久不更新了,再更新已是打工人! 我将分享用云开发 ...
微信小程序云开发数据库操作
1.在app.js中初始化云环境 // app.js App({onLaunch() {//初始化云服务if (!wx.cloud) {console.error('请使用 2.2.3 或以上的基础库 ...

微信小程序云开发如何将页面生成为pdf?