小程序中webview嵌套vue页面：页面截图怎么实现？
许多开发者在使用小程序开发时，会遇到webview嵌套vue页面，需要在vue中实现页面截图功能的情况。
传统的截图库，如dom-to-image和html2canvas，虽然可以正常运行于浏览器，但无法在小程序webview环境中生成图片。执行截图操作后，只能获取到"data:,"或空值。
解决方案：puppeteer
立即学习“前端免费学习笔记（深入）”；
情感家园企业站5.0 多语言多风格版
下载
一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！
解决这个问题的方案是使用puppeteer，一个node.js无头浏览器库。通过使用puppeteer，我们可以进行服务端截图，而非在vue中直接执行该操作。
puppeteer代码示例：
const puppeteer = require("puppeteer");
//创建一个无头浏览器
puppeteer.launch().then(async (browser) => {
const page = await browser.newPage(); //打开tab页
await page.goto("https://example.com"); //打开页面
await page.screenshot({ path: "example.png" }); //截图
await browser.close(); //关闭浏览器
});使用puppeteer截图可以正常获取图片，帮助开发者实现小程序中vue页面的截图功能。
