Use with React PDF

[cmnstmntmn]

Hei,

I have a question regarding the the integration with react pdf.

It is able to render SVGs, with it's own primitives, like:

      <View>
        <Svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 247.06813 247.06813"
        >
          <G fill="none" stroke="#000" strokeMiterlimit={10} strokeWidth={6}>
            <Line x1="180.65817" y1="123.5932" x2="66.52024" y2="123.5932" />
          </G>
        </Svg>
      </View>

but i have no ideea how svgs generated by JSBarcode can be integrated with. Thanks

[kdgyimah]

Hei,

I have a question regarding the the integration with react pdf.

It is able to render SVGs, with it's own primitives, like:

      <View>
        <Svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 247.06813 247.06813"
        >
          <G fill="none" stroke="#000" strokeMiterlimit={10} strokeWidth={6}>
            <Line x1="180.65817" y1="123.5932" x2="66.52024" y2="123.5932" />
          </G>
        </Svg>
      </View>

but i have no ideea how svgs generated by JSBarcode can be integrated with. Thanks

Does this help?

import React, { useEffect } from "react";
import JsBarcode from "jsbarcode";

const App = () => {
 /**
 * effect
 */
 useEffect(() => {
    JsBarcode("#barcode", "Hello");
  }, []);

 return (
   <React.Fragment>
     <svg id="barcode"></svg>
  </React.Fragment>
 )
}

With this example, the SVG is a standalone element generated by JSBarcode so you won't have to be limited to make it integrate with any third-party package

[wodin]

It is able to render SVGs, with it's own primitives

This looks like React Native SVGs. Perhaps the following React Native code will work for you:

https://snack.expo.io/@wodin/better-barcode-generator

[jhunexjun]

I am also looking for an answer. This is so far my code. If only the can be converted into base64 then it'll fix the issue.

import { Document, Page, Text, View, Image } from '@react-pdf/renderer';
import Barcode from 'react-barcode';

function createBarcode() {
   return <Barcode value="123456789" renderer='img' />;
}
<Document>
    <Page>
              <View>
                  <Image src={createBarcode()} style={{width: 10, height: 10}} />
             </View>
      </Page>
</Document>

[jhunexjun]

I was able to fix this by creating a hidden div with <img /> inside with an id prop. import JsBarcode from 'jsbarcode';

<div style={{display: 'none'}}>
    <img id="barcode" />
</div>

Then in an onClick handler for like <button> it calls:

function getImgBase64String(value) {
    const barcodeNode = document.getElementById('barcode');
    JsBarcode(barcodeNode, value, {displayValue: false});
    return barcodeNode.src;
}

The returned value of getImgBase64String() will be used in the pdf.

<Document>
   <Page>
      <View style={styles.workOrderLabel}>
         <Image src={() => props.data.barcode.base64} style={{width:'100px', height: '20px'}} />
      </View>
   </Page>
</Document>

[anisharya16]

I also had the same requirement, to add barcode in pdf generated react-pdf/renderer. This is what I did, hope it helps:

Functions outside React component:

const barcodeOptions = {
  format: 'CODE128',
  width: 2,
  height: 100,
  displayValue: false,
}

const generateBarcodeImage = (data: any) => {
  const canvas = document.createElement('canvas')
  JsBarcode(canvas, data, barcodeOptions)
  return canvas.toDataURL('image/png')
}

In JSX compnent, wherever you want to use:

        <View style={{ width: 280, height: 30, marginLeft: -9 }}>
          <Image src={generateBarcodeImage(data?.lrNumber ?? data?.id)} />
        </View>