react-pdf Support text columns

OS: All

React-pdf version: Lastest

Description: Add test column layout support. Textkit already supports this

Sep 10 '18 19:09 diegomura

Hi, just curious if this has been/is being implemented. Finding myself in a situation now where I found myself with a really long list that I don't want to continue onto a second page. Want it to wrap into a second column to keep it all on one page.

Maybe there is another way to do this that someone wouldn't mind sharing how they handled it?

Nov 09 '18 23:11 ghost

+1 This would be great!

Nov 26 '18 22:11 AirborneEagle

I’m currently working on a huge refactor and improvement of the text layout that fixes some issues i had with it. So until that’s finished I cannot add this feature to react-pdf, and unfortunately it’s something you cannot achieve right now

Nov 27 '18 13:11 diegomura

What would it take to build this feature? Is this something that people could help with? I am looking to dynamically generate PDFs with columns that span multiple pages

Aug 14 '19 12:08 alxhghs

bump

Aug 20 '19 08:08 imdevan

I've used 'original' pdfkit version: ^0.10.0 to build a MULTICOLUMN work-around component:

so just run: yarn add pdfkit

create the component:

import React, { useRef } from 'react';
import { Canvas } from '@react-pdf/renderer';
import PDFKit from 'pdfkit';

interface Props {
  text: string;
  width: number;
  height: number;
  style?: any;
  options?: any;
}

const MultiColumn: React.FC<Props> = ({
  text,
  width,
  height,
  style = {},
  options = {}
}) => {
  const canvasRef = useRef(null);
  return (
    <Canvas
      debug={true}
      ref={canvasRef}
      style={{ width, height, ...style }}
      paint={() => {
        const document = new PDFKit();
        document.page.content = canvasRef.current.root.instance.page.content;
        document.text(text, 0, 0, {
          width,
          height,
          columns: 2,
          ellipsis: true,
          ...options
        });
        return null;
      }}
    />
  );
};

export default MultiColumn;

and use it like:

<MultiColumn width={300} height={100} text={'here your multi line text'} />

Nov 27 '19 10:11 davidecarpini

any news here?

Dec 16 '20 19:12 artdias90

I've used 'original' pdfkit version: ^0.10.0 to build a MULTICOLUMN work-around component:

so just run: yarn add pdfkit

create the component:

import React, { useRef } from 'react';
import { Canvas } from '@react-pdf/renderer';
import PDFKit from 'pdfkit';

interface Props {
  text: string;
  width: number;
  height: number;
  style?: any;
  options?: any;
}

const MultiColumn: React.FC<Props> = ({
  text,
  width,
  height,
  style = {},
  options = {}
}) => {
  const canvasRef = useRef(null);
  return (
    <Canvas
      debug={true}
      ref={canvasRef}
      style={{ width, height, ...style }}
      paint={() => {
        const document = new PDFKit();
        document.page.content = canvasRef.current.root.instance.page.content;
        document.text(text, 0, 0, {
          width,
          height,
          columns: 2,
          ellipsis: true,
          ...options
        });
        return null;
      }}
    />
  );
};

export default MultiColumn;

and use it like:

<MultiColumn width={300} height={100} text={'here your multi line text'} />

Can it also wrap to several pages?

Jan 18 '21 09:01 nissimscialom

Hi, is there any documentation on using @react-pdf/textkit out there, regarding multicolumns?

May 01 '21 13:05 hkar19

I need this to create a book with two columns on the page. I'm available next week to start work on this. Has anyone else started designing this?

At a high level I'm considering 3 options: 1 - new primitive type called Column 2 - new prop for View called columns 3 - a custom render method for View

I just need 2 columns but I assume we could support multiple with a little extra effort. I also need wrapping across multiple pages to work as expected.