使用 html2canvas 捕获屏幕并使用 weappbridge 打印图像

Question

我正在使用 imTigger 的网络硬件桥。我的目标是在不调用系统对话框的情况下直接从网页进行静默打印。

这是网络硬件桥项目： https://github.com/imTigger/webapp-hardware-bridge 我能够映射我的打印机和 select 并使用 javascript 直接打印给它们 pdf 和原始 pdf，就像在许多示例中一样

我还可以使用 html2canvas 并捕获屏幕并将图像附加到 html 并在浏览器控制台中显示。

现在我尝试使用这两种代码将图像发送到打印机，但我得到了一张空白图像。打印机亮起但未打印图像。所以我使用 cutepdf 打印成 pdf，这样我就可以看到打印的内容，然后得到一个空白的 pdf 页面。

这是我的代码：

<script>

html2canvas(document.querySelector("#capture")).then(
    canvas => {

        var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
        console.log(image);
        printService.submit({
                'type': 'INVOICE',
                'raw_content':  image
            }); 
}); 
</script>

我也试过了，没有成功

        var image = canvas.toDataURL("image/png");

谢谢！

Answer 1

我找到了解决方案，

需要从数据中删除 data:image/png;base64 并将数据作为 png 类型的文件发送 'url': 'file.png'.

此代码有效：

<script>

html2canvas(document.querySelector("#capture")).然后( canvas => {

    var image = canvas.toDataURL("image/png").replace("data:image/png;base64,", "");
    console.log(image);
    printService.submit({
            'type': 'INVOICE',
            'url': 'file.png',
            'file_content':  image
        });

});

使用 html2canvas 捕获屏幕并使用 weappbridge 打印图像

Use html2canvas to capture screen and print the image using weappbridge

invoice

html2canvas