Skip to Content
Menu
Musisz się zarejestrować, aby móc wchodzić w interakcje z tą społecznością.
To pytanie dostało ostrzeżenie
1 Odpowiedz
1293 Widoki

I try to add button in POS screen to print a simple HTML code 
And I use this code for this, 

        async _printWeb(receipt) {

            try {

                const receiptContainer = $(this.el).find('.pos-cash-rpt-container');

                receiptContainer.empty();

                receiptContainer.html(receipt);

                await new Promise((resolve) => setTimeout(resolve, 100));

                window.print();

            } catch (_err) {

                await this.showPopup('ErrorPopup', {

                    title: this.env._t('Printing is not supported on some browsers'),

                    body: this.env._t(

                        'Printing is not supported on some browsers due to no default printing protocol ' +

                            'is available. It is possible to print your tickets by making use of an IoT Box.'

                    ),

                });

            }

I check every thing and it's ok but the print preview every time came empty 
can any one help me in this 

Awatar
Odrzuć
Najlepsza odpowiedź

The issue you're encountering with the print preview coming up empty might be due to the timing of the window.print() function. The DOM might not be fully rendered or updated when the print command is triggered. Here are a few steps you can take to ensure the HTML content is properly rendered before the print preview is triggered:

Possible Solutions

  1. Ensure the DOM is Fully Updated:
    • Instead of using a simple setTimeout, you can use requestAnimationFrame to ensure that the DOM update has been fully rendered before triggering the print.
    javascriptCopy codeasync _printWeb(receipt) {
        try {
            const receiptContainer = $(this.el).find('.pos-cash-rpt-container');
    
            receiptContainer.empty();
            receiptContainer.html(receipt);
    
            // Wait for the next frame to ensure the DOM is updated
            await new Promise(resolve => requestAnimationFrame(resolve));
    
            window.print();
        } catch (_err) {
            await this.showPopup('ErrorPopup', {
                title: this.env._t('Printing is not supported on some browsers'),
                body: this.env._t(
                    'Printing is not supported on some browsers due to no default printing protocol ' +
                    'is available. It is possible to print your tickets by making use of an IoT Box.'
                ),
            });
        }
    }
    
  2. Force a Reflow Before Printing:
    • Sometimes, forcing a reflow of the document can help ensure that all changes are rendered before printing. You can do this by accessing certain properties (like offsetHeight) that trigger a reflow.
    javascriptCopy codeasync _printWeb(receipt) {
        try {
            const receiptContainer = $(this.el).find('.pos-cash-rpt-container');
    
            receiptContainer.empty();
            receiptContainer.html(receipt);
    
            // Force reflow
            receiptContainer[0].offsetHeight;
    
            await new Promise((resolve) => setTimeout(resolve, 100));
    
            window.print();
        } catch (_err) {
            await this.showPopup('ErrorPopup', {
                title: this.env._t('Printing is not supported on some browsers'),
                body: this.env._t(
                    'Printing is not supported on some browsers due to no default printing protocol ' +
                    'is available. It is possible to print your tickets by making use of an IoT Box.'
                ),
            });
        }
    }
    
  3. Check for Browser Compatibility:
    • Make sure that the browser you're using supports the window.print() function as expected. Sometimes, certain browsers might have issues with printing, especially in a POS environment. Testing on different browsers can help identify if the problem is browser-specific.
  4. Debugging the Receipt Container:
    • Add some logging or debugging to ensure that the receiptContainer.html(receipt) is indeed populating the container with the correct content before printing.
    javascriptCopy codeconsole.log(receipt); // Check if the receipt content is correct
    console.log(receiptContainer.html()); // Check if the container is populated with the content
    

If the print preview continues to show up empty after trying these solutions, you may need to explore alternative approaches to printing, such as using the Odoo IoT Box for more reliable printing in POS environments.

Awatar
Odrzuć
Autor

thank you it's working

Powiązane posty Odpowiedzi Widoki Czynność
1
wrz 24
1388
2
lip 24
1294
1
wrz 24
2324
3
maj 24
3279
0
lip 25
224