Question 264242 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to get width and height React-pdf

I am unable to get the width and height in react-pdf
enter image description here

I want to get the width and height in react-pdf without the debug attribute.

<View className="dynamic-height" debug>
    <View style={[membraneStyle.textHeader, { width: getRationVal(pageWidth) }]}>
        <SubLine lineWidth='10px' lineHeight='12' />
        <Text style={{ paddingLeft: 5 }}>Desalination  Demineralization  Membrane Separator (MEMS) Unit-Level Flow Summary</Text>
    </View>
    <View style={[membraneStyle.mainTable, { width: getRationVal(tablewidth) }]}>
        {createHeader(herder_val)}
        {createContent(items1, herder_val)}
    </View>
</View>
Tags:

2

Answers


  1. 0 
    handleLoadSuccess = async (pdfObject) => {
  // If you want to get the dimension for page 1 (1-indexed)
  const page = await pdf.getPage(1);
  console.log(page.width);
  console.log(page.height);
};

render() {
  <Document
    onLoadSuccess={handleLoadSuccess}
    // Other props
  />
};

    Include this code to access the onLoadSuccess property. For instance, you can retrieve details such as page width, page height, and more when you do this.

    Login or Signup to reply.
  2. 0 
    Use the measure method to get the width and height of the View component.
you can modify your code to get the width and height of your View 
components.

import React, { useRef, useEffect } from 'react';
import { Document, Page, Text, View, PDFViewer } from '@react- 
pdf/renderer';

function MyPDF() {
  const viewRef = useRef(null);
  let width = 0;
  let height = 0;

  useEffect(() => {
    if (viewRef.current) {
      viewRef.current.measure((x, y, measuredWidth, measuredHeight) => {
        width = measuredWidth;
        height = measuredHeight;
        console.log(`Width: ${width}, Height: ${height}`);
      });
    }
  }, []);

  return (
    <PDFViewer>
      <Document>
        <Page size="A4">
          <View ref={viewRef} style={{ width: 200, height: 100 }}>
            <Text>My View</Text>
          </View>
        </Page>
      </Document>
    </PDFViewer>
  );
}

export default MyPDF;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search