Используйте html2canvas для захвата экрана и печати изображения с помощью weappbridge

Question

Я использую аппаратный мост от imTigger. Моя цель - выполнять как автоматическую печать непосредственно с веб-страницы, не вызывая системное диалоговое окно.

Вот проект моста аппаратного обеспечения веб-сети: https://github.com/imTigger/webapp-hardware-bridge, и я могу сопоставить свои принтеры и выберите и распечатайте непосредственно для них pdf и необработанный pdf, используя javascript, как во многих примерах

. Я также могу использовать html2canvas, захватывать экран и добавлять изображение к html и отображать его в браузере. console.

Теперь я пытаюсь отправить изображение на принтер, используя оба кода, и получаю полное изображение. Принтер загорается, но изображение не печатается. Поэтому я печатаю в pdf, используя cutepdf, чтобы видеть, что печатается, и получаю пустую страницу в формате 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 из данных и отправки данных в виде файла с URL-адресом типа * png ' ':' file.png '.

Этот код работает:

<script>

html2canvas (document.querySelector ("# capture")). then (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
        }); 

});