QRコードを使用するReactJSアプリを作成していて、PDFドキュメントをコードのバッチで一度に印刷できるようにしたいと思っています。現在両方を使用しています react -qr-svg コードを生成するには @ react-pdf/renderer を使用してドキュメントを作成します。問題は、これらのQRコードをドキュメントに表示できなかったことです。
まず、@ react-pdf/rendererのImageタグを次のように使用してみました。
<Image
src={<QRCode
level="Q"
style={{width: 256, marginBottom: 50 }}
value={'hello world'}
/>}
/>
もちろん、それでもうまくいきませんでした。その後、SVGをデータバッファーに変換しようとしたところ、結果がありませんでした。
これに対する簡単な解決策はありますか?このプロジェクトには他のライブラリを使用する必要がありますか?
ドキュメントから直接: https://www.npmjs.com/package/react-qr-svg
イメージタグに配置する必要はありません。
私の仮定は、このライブラリが_<svg> ... </svg>
_を出力することです(つまり、直接出力するための有効なHTMLタグ)
タグ/要素を直接出力できますか?
_ 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"
/>
);
}
}
_
[〜#〜]更新[〜#〜]
ライブラリー @ react-pdf/renderer はsvgタグでは機能しないため、私が正しく理解している場合、ページに_<svg>...</svg>
_を出力することはできません。そのため、svgをbase-64文字列にシリアル化し、それをイメージタグのsrcに割り当てることをお勧めします。
ライブラリなしで簡単なデモをまとめました: https://codepen.io/Alexander9111/pen/QWweYXO
HTML(簡略化):
_<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);
_
これをReactで実行したい場合は、次のように実行できると思います。
_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 }/>
);
}
}
_
[〜#〜]または[〜#〜]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>
)
}
}
_
[〜#〜] update [〜#〜]-CodePenでReactで動作しています:- https://codepen.io/Alexander9111/pen/GRJKQQK
HTML:_<div id="root"></div>
_
CSS:_svg{border: 2px solid black;} img{border: 2px solid blue;}
_
React 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')
);
_
qrcode.react
と@react-pdf/renderer
を併用しています。最初に行う必要があるのは、QRキャンバスをbase64に変換することです
const qrCodeCanvas = document.querySelector('canvas');
const qrCodeDataUri = qrCodeCanvas.toDataURL('image/jpg', 0.3);
次に、base64文字列(qrCodeDataUri
)をプロップとして@react-pdf/renderer
画像タグのソースのPDFコンポーネントに渡します:
<Image source={ {uri: props.yourBase64Image} } />