Je crée une application ReactJS qui utilise des codes QR et je souhaite pouvoir imprimer un PDF document avec un lot de codes à la fois. Je suis actuellement en train d'utiliser les deux réacteur-qr-svg pour générer les codes et @ réact-pdf/rendu pour créer le Document. Le problème est que je n'ai pas pu afficher ces codes QR sur le document.
J'ai d'abord essayé d'utiliser l'étiquette d'image de @ réact-pdf/rendu comme ceci:
<Image
src={<QRCode
level="Q"
style={{width: 256, marginBottom: 50 }}
value={'hello world'}
/>}
/>
Whick, bien sûr, n'a pas fonctionné, après cela, j'ai essayé de convertir le SVG en un tampon de données et n'avait aucun résultat.
Y a-t-il une solution simple pour cela? Devrais-je utiliser d'autres bibliothèques pour ce projet?
Directement de la DOCS: https://www.npmjs.com/package/react-qr-svg
Vous n'avez pas besoin de le mettre dans une étiquette d'image.
Mon hypothèse est cette sortie de la bibliothèque <svg> ... </svg>
(I.e. Tags HTML valides à la sortie directement)
Vous pouvez simplement sortir le tag/l'élément directement?
import React from "react";
import { QRCode } from "react-qr-svg";
class Demo extends React.Component {
render() {
return (
<QRCode
bgColor="#FFFFFF"
fgColor="#000000"
level="Q"
style={{ width: 256 }}
value="some text"
/>
);
}
}
[~ # ~] Mise à jour [~ # ~]
Si je comprends bien, nous ne pouvons pas simplement sortir <svg>...</svg>
Sur la page comme la bibliothèque @ réact-pdf/rend ne fonctionnera pas avec les balises SVG. Je propose donc de nous sérialiser le SVG à une chaîne de base-64, en attribuant à la SRC de l'étiquette d'image, puis de fonctionner.
J'ai mis une démo simplifiée ensemble sans bibliothèques: https://codepen.io/alexander9111/pen/qwweyxo
HTML (simplifié):
<svg>
<ellipse class="ground" fill="##787f6a" cx="283.5" cy="487.5" rx="259" ry="80"/>
<path class="kiwi" fill="#94d31b" d="M210.333,65.331C104.367,...,203.01z"/>
</svg>
<div id="target">
<!-- place to put our img tag -->
</div>
JS:
const svg = document.querySelector("svg");
const serializer = new XMLSerializer();
const svgStr = serializer.serializeToString(svg);
const img = document.createElement("img")
img.src = 'data:image/svg+xml;base64,'+ window.btoa(svgStr);
const target = document.querySelector("#target");
target.appendChild(img);
svg.parentNode.removeChild(svg);
Maintenant, si nous voulons le faire dans réagir, je suppose que nous pouvons le faire quelque chose comme ceci:
import React from "react";
import { QRCode } from "react-qr-svg";
class Demo extends React.Component {
render() {
const svg = function {
return (<QRCode
level="Q"
style={{width: 256, marginBottom: 50 }}
value={'hello world'}
/>);
};
const serializer = new XMLSerializer();
const svgStr = serializer.serializeToString(svg);
const img_src = 'data:image/svg+xml;base64,'+ window.btoa(svgStr);
return (
<img src={ img_src }/>
);
}
}
[~ # ~] ou [~ # ~ ~] Nous pourrions probablement le faire avec des crochets de cycle de vie telles que componentDidMount()
import React from "react";
import { QRCode } from "react-qr-svg";
class Demo extends React.Component {
componentDidMount() {
const div = this.refs.target;
const svg = div.querySelector("svg");
const serializer = new XMLSerializer();
const svgStr = serializer.serializeToString(svg);
const img = this.refs.img;
img.src = 'data:image/svg+xml;base64,'+ window.btoa(svgStr);
svg.parentNode.removeChild(svg);
}
render() {
return (<div ref="target">
<QRCode
level="Q"
style={{width: 256, marginBottom: 50 }}
value={'hello world'}
/>
<img ref="img"/>
</div>
)
}
}
[~ # ~] Mise à jour [~ # ~] - Je l'ai travaillé dans React sur Codepen: https://codepen.io/Alexander9111/stylo/grjkqqk
HTML: <div id="root"></div>
CSS: svg{border: 2px solid black;} img{border: 2px solid blue;}
Réagir JS:
class Demo extends React.Component {
componentDidMount() {
const div = this.refs.target;
const svg = div.querySelector("svg");
console.log(svg);
const serializer = new XMLSerializer();
const svgStr = serializer.serializeToString(svg);
const img = this.refs.img;
console.log(img);
img.src = 'data:image/svg+xml;base64,'+ window.btoa(svgStr);
svg.parentNode.removeChild(svg);
}
render() {
return (
<div ref="target">
<svg width="400" height="400">
<circle r="100" cx="200" cy="200" fill="red" />
</svg>
<img ref="img"/>
</div>
);
}
}
ReactDOM.render(
<Demo/>,
document.getElementById('root')
);
J'utilise qrcode.react
avec @react-pdf/renderer
. La première chose à faire est de convertir votre quotieur de QR en base64
const qrCodeCanvas = document.querySelector('canvas');
const qrCodeDataUri = qrCodeCanvas.toDataURL('image/jpg', 0.3);
Ensuite, passez la chaîne de base64 (qrCodeDataUri
) comme un accéder à votre PDF composant à la source de @react-pdf/renderer
tag image:
<Image source={ {uri: props.yourBase64Image} } />