Flutter Web打印预览出现空白页，如何使用蓝牙/有线打印机打印当前屏幕内容？

问题说明 #

Flutter Web 由于编译导出为JavaScript的渲染特性，无法直接调用浏览器原生打印接口打印当前网页内容，调用后打印预览会显示空白页，该问题为Flutter Web特有，普通前端站点不存在此类异常。

可用实现方案 #

针对通过蓝牙打印机、有线打印机打印当前屏幕内容的需求，目前有三类成熟的落地方案：

• printing包PDF构建方案
  这是目前社区覆盖场景最全面的通用方案，支持适配蓝牙、有线等多类型打印机，核心逻辑是将需要打印的内容按照PDF格式规范重新构建后输出打印，不依赖浏览器原生DOM打印能力，可规避Flutter Web原生打印空白的问题，同时跨浏览器兼容性表现更好。
• 页面截图转图片打印方案
  若不想重新构建全页PDF内容，可借助screen_capture类工具包先将当前Flutter页面的渲染结果导出为高清图片，再调用浏览器打印接口直接打印图片，可大幅降低布局适配成本。

  注意事项：

  1. 若使用CanvasKit渲染模式，部分低版本浏览器可能存在截图失败的问题，可切换为HTML渲染模式做兼容
  2. 打印前需要调整截图的DPI参数，避免打印内容模糊

• iframe注入原生HTML打印方案
  如果待打印内容以文本、基础样式为主，可将需要打印的内容拼接为标准HTML代码，注入到页面中隐藏的iframe节点内，再调用iframe的原生打印接口，完全复用浏览器原生打印能力，适合内容结构简单的页面场景。

内容的提问来源于stack exchange，提问作者Jason Simard