Print everything when using Mac + Chrome

[mbaldas]

Hello everyone,

I am using the library to print some specific content on my website and it works fine on Windows + Chrome, or even Mac with some browser like Arc.. But when I'm using MacOS + Chrome it previews the pdf correctly but once I hit print it downloads the my whole UI on the pdf.

There's some solution to that?

[MatthewHerbst]

Hello. I am not able to replicate this. I tested using the official example on Codesandbox. I'm using:

MacOS: 13.5.1
Chrome: 116.0.5845.140 (Official Build) (arm64)

Could you please share an example that causes this behavior, and/or share more information about the versions of MacOS and Chrome you're using? Thanks

[kaspervdh]

I'm getting this behaviour on IOS + Chrome too. IOS + Safari, Windows + Edge and Windows + Chrome give the desired results.

[MatthewHerbst]

@kaspervdh can you please let me know what versions of iOS and Chrome you are using? Could you make make a screen recording? A reproducible example in codesandbox would be helpful.

[kaspervdh]

IOS 16.2, Chrome version 117.0.5938.108.

import React, { useState } from 'react';
import BarcodeGenerator from './modules/barcode.generator.component';

const Test = () => {
    const [generateBarcode, setGenerateBarcode] = useState(false);

    const handleGenerateBarcode = () => {
        setGenerateBarcode(true);
    };

    return (
        <div className='mt-40'>
            {generateBarcode ? (
                <BarcodeGenerator itemId={1} openOnInit={false} />
            ) : (
                <button onClick={handleGenerateBarcode}>Generate Barcode</button>
            )}
        </div>
    );
};

export default Test;

import React, { useEffect, useRef } from 'react';
import JsBarcode from 'jsbarcode';
import { useReactToPrint } from 'react-to-print';

const BarcodeGenerator = ({ itemId, openOnInit }) => {
    const barcodeRef = useRef(null);

    const printBarcode = useReactToPrint({
        content: () => barcodeRef.current,
    });

    useEffect(() => {
        const generateBarcode = () => {
            if (barcodeRef.current) {
                const options = {
                    format: 'CODE128',
                    width: 2,
                    height: 100,
                    displayValue: true,
                };
                JsBarcode(barcodeRef.current, itemId, options);
                if (openOnInit) {
                    printBarcode();
                }
            }
        };

        generateBarcode();
    }, [itemId, openOnInit, printBarcode]);

    return (
        <svg
            className="cursor-pointer"
            onClick={printBarcode}
            ref={barcodeRef}
        ></svg>
    );
};

export default BarcodeGenerator;

Difference:
Here you see the layout of the rest of the page (not that clearly visible because this is mostly empty). This is on IOS + Chrome

Here it only renders the SVG. This is on IOS + Safari

[MatthewHerbst]

Oh, you're on iOS, apologies, I read MacOS. This is a known issue for iOS unfortunately: #187 Still not aware of a good solution 😢

[MatthewHerbst]

Closing in favor of #187 will keep trying to solve this though!