如何打印反应条码组件 [英] How to print a react-barcode component
问题描述
我正在尝试打印由 react-barcode 创建的条形码.
我尝试使用这个问题中描述的方法 和 this 但我似乎无法打印条形码.
这可能是因为一个 SVG 正在被 react-barcode 渲染.我也试过 react-to-print 和 react-easy-print 但他们似乎也让我失望.
我也希望使条形码可下载，但似乎没有任何效果.我下面的代码是我目前得到的.
import React, { Component } from 'react';从 'react-barcode' 导入条码；
class App 扩展组件 {状态= {价值:''}onChange=(e)=>{this.setState({value:e.target.value})}onClick=(e)=>{//打印条码的逻辑来了}使成为() {const { value } = this.state;返回 (<div className="应用程序"><input type="text" onChange={this.onChange} value={value}/><条形码价值={价值}/><button onClick={this.onClick}>打印条码</button>);}}导出默认应用程序；
这是我使用过的并且对我有用.您将需要 html2canvas.
我将为此使用 React 钩子，如果您愿意，可以随意将其转换为基于类的组件.
const App=(props)=>{const [value,setValue] = React.useState('');const wrapper_ref = React.useRef();const onChange=(e)=>{setValue(e.target.value)}const onClick=(e)=>{常量选项 = {规模:4}const elem = wrapper_ref.current;html2canvas(elem, opt).then(canvas => {const iframe = document.createElement('iframe')iframe.name = 'printf'iframe.id = 'printf'iframe.height = 0;iframe.width = 0;document.body.appendChild(iframe)const imgUrl = canvas.toDataURL({格式:'jpeg',质量:'1.0'})常量样式=`高度:100vh；宽度:100vw；位置:绝对；左:0:顶部:0;`;const url = `<img style="${style}" src="${imgUrl}"/>`;var newWin = window.frames["printf"];newWin.document.write(`<body onload="window.print()">${url}</body>`);newWin.document.close();});}返回 (<div className="应用程序"><input type="text" onChange={onChange} value={value}/>{/**这个包装器很重要*/}<div ref={wrapper_ref}><条形码价值={价值}/><button onClick={onClick}>打印条码</button>
);}导出默认应用程序；
这行得通
I am trying to print a barcode created by react-barcode.
I have tried using methods described in this question and this but i cant seem to print the barcodes.
This is probably because an SVG is being rendered by react-barcode. I have also tried react-to-print and react-easy-print but they seem to fail me too.
I also hope to make the barcode downloadable but nothing seems to work.The code i have below is what i have got so far.
import React, { Component } from 'react'; import BarCode from 'react-barcode';
class App extends Component {
state= {
value:''
}
onChange=(e)=>{
this.setState({value:e.target.value})
}
onClick=(e)=>{
// LOGIC TO PRINT BARCODE COMES HERE
}
render() {
const { value } = this.state;
return (
<div className="App">
<input type="text" onChange={this.onChange} value={value} />
<BarCode
value={value}
/>
<button onClick={this.onClick}>Print Barcode</button>
</div>
);
}
}
export default App;
This is what i used and it worked for me. You will need html2canvas.
I'll be using React hooks for this, feel free to convert it to class based component if you want.
const App=(props)=>{
const [value,setValue] = React.useState('');
const wrapper_ref = React.useRef();
const onChange=(e)=>{
setValue(e.target.value)
}
const onClick=(e)=>{
const opt = {
scale: 4
}
const elem = wrapper_ref.current;
html2canvas(elem, opt).then(canvas => {
const iframe = document.createElement('iframe')
iframe.name = 'printf'
iframe.id = 'printf'
iframe.height = 0;
iframe.width = 0;
document.body.appendChild(iframe)
const imgUrl = canvas.toDataURL({
format: 'jpeg',
quality: '1.0'
})
const style=`
height:100vh;
width:100vw;
position:absolute;
left:0:
top:0;
`;
const url = `<img style="${style}" src="${imgUrl}"/>`;
var newWin = window.frames["printf"];
newWin.document.write(`<body onload="window.print()">${url}</body>`);
newWin.document.close();
});
}
return (
<div className="App">
<input type="text" onChange={onChange} value={value} />
{/**This wrapper is important*/}
<div ref={wrapper_ref}>
<BarCode
value={value}
/>
</div>
<button onClick={onClick}>Print Barcode</button>
</div>
);
}
export default App;
This would work
这篇关于如何打印反应条码组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
