Почему не отображается текст во встроенной странице (pdf-lib)?

Question

[pogromist]

Мне нужно нарисовать штампик и расставить его на множество страниц.
Для этого я использую либу pdf-lib, т.к. мне нужно штамп еще и вращать, я решил вынести его на отдельный слой.
Но в pdf-lib не возможности вынести на отдельный слой, поэтому я вынес штамп на отдельную страницу (отдельного pdf файла), и затем внедряю его методом drawPage.

Внедрение работает частично, а именно не могу понять почему не появляется текст?
Код ниже рабочий, но нужно сначала: npm i pdf-lib

const { PDFDocument, StandardFonts, PDFFont, degrees, rgb, PDFNumber, PDFPage } = require('pdf-lib');
const fs = require("fs");

const rbgWrapper = (red,green,blue) => rgb(red/(255/100)/100, green/(255/100)/100, blue/(255/100)/100);

// CONSTANTS
const STAMP_COLOR = [85,0,171];

// Method for create PDF with stamp
const createStampDoc = async () => {
const newPDF = await PDFDocument.create();
const width = 250;

// Creating page for stamp
const page = newPDF.addPage([width, 100]);

const drawStamp = (page, x, y) => {
	let curY = y;

	curY+=10;
	page.moveTo(x, curY);
	page.drawText( "TEXT ONE", {
		size: 9,
		color: rbgWrapper(...STAMP_COLOR)
	});

	curY+=10;
	page.moveTo(x, curY);
	page.drawText( "TEXT TWO", {
		size: 9,
		color: rbgWrapper(...STAMP_COLOR)
	});

	// Border of stamp
	const height = curY-y+10;
	page.drawRectangle({
		x: x,
		y: y,
		width: width,
		height: height,
		borderColor: rbgWrapper(...STAMP_COLOR),
		borderWidth: 1,
		opacity:0.3,
		color: rbgWrapper(255,255,255)
	});

	page.setHeight(height);


	return {width, height};
};

drawStamp(page, 0, 0);

return newPDF;
};

async function main() {
// Creating new main PDF file
const mainPDF = await PDFDocument.create();
mainPDF.addPage([350,400]);
mainPDF.addPage([350,400]);

const stampPDF = await createStampDoc();

// embedding newPDF to mainPDF (for use drawPage)
const embeddedPage = await mainPDF.embedPage(stampPDF.getPage(0));

// In each page embedding stamp page
const pages = mainPDF.getPages();
for (const page of pages) {
	await page.drawPage(embeddedPage, {x: 100, y: 100, rotate: degrees(0), opacity: 1});
}

// TODO: it working!! but embedding not working!
// Adding newPDF to mainPDF (as separated page)
const [copiedStampPage] = await mainPDF.copyPages(stampPDF, [0]); // Embed 0 page from stampDoc in pdfDoc
mainPDF.addPage(copiedStampPage);

const binaryFileWithStamp = await mainPDF.save();
fs.writeFileSync("stamp.pdf", Buffer.from(binaryFileWithStamp) );

// pdfDoc.saveAsBase64
// fs.writeFileSync("new23.pdf", pdfBytes, {encoding: "utf-8"});
}

main();

Comments

[Виталий Б]

Странно. В chrome/yandex текст есть (как и в acrobat), а в firefox его нет.
https://replit.com/@vitos8686/PDFLIB2-1?v=1

Answer 1

[Виталий Б]

spoiler

const { PDFDocument, StandardFonts, PDFFont, degrees, rgb, PDFNumber, PDFPage } = require('pdf-lib');
const fs = require("fs");

const rbgWrapper = (red, green, blue) => rgb(red / (255 / 100) / 100, green / (255 / 100) / 100, blue / (255 / 100) / 100);


// CONSTANTS
const STAMP_COLOR = [85, 0, 171];

// Method for create PDF with stamp
const createStampDoc = async () => {
  const newPDF = await PDFDocument.create();
  const width = 250;

  // Embed the Helvetica font
  const TimesRoman = await newPDF.embedFont(StandardFonts.TimesRoman)

  // Creating page for stamp
  const page = newPDF.addPage([width, 100]);

  const drawStamp = (page, x, y) => {
    let curY = y;

    curY += 10;
    page.moveTo(x, curY);
    page.drawText("TEXT ONE", {
      font: TimesRoman,
      size: 10,
      color: rbgWrapper(...STAMP_COLOR)
    });

    curY += 10;
    page.moveTo(x, curY);
    page.drawText("TEXT TWO", {
      font: TimesRoman,
      size: 10,
      color: rbgWrapper(...STAMP_COLOR)
    });

    // Border of stamp
    const height = curY - y + 10;
    page.drawRectangle({
      x: x,
      y: y,
      width: width,
      height: height,
      borderColor: rbgWrapper(...STAMP_COLOR),
      borderWidth: 1,
      opacity: 0.3,
      color: rbgWrapper(255, 255, 255)
    });

    page.setHeight(height);


    return { width, height };
  };

  drawStamp(page, 0, 0);

  return newPDF;
};

async function main() {
  // Creating new main PDF file
  const mainPDF = await PDFDocument.create();
  mainPDF.addPage([350, 400]);
  mainPDF.addPage([350, 400]);

  const stampPDF = await createStampDoc();

   const [copiedStampPage] = await mainPDF.copyPages(stampPDF, [0]);
 
   const embeddedPage = await mainPDF.embedPage(copiedStampPage);

  // In each page embedding stamp page
  const pages = mainPDF.getPages();
  for (const page of pages) {
    await page.drawPage(embeddedPage, { x: 100, y: 100, rotate: degrees(20), opacity: 1 });
  }
 


  const binaryFileWithStamp = await mainPDF.save();
  fs.writeFileSync("stamp.pdf", Buffer.from(binaryFileWithStamp));
}

main();

https://replit.com/@vitos8686/PDFLIB2-1?v=1

Comments

[pogromist]

Я так понял проблема была в том что я не правильно внедрял страницу?
Нужно было через copyPages?
Хотя странно, ведь мой метод частично работал, то есть линии внедрялись.
Видимо это недоработка либы..

з.ы.: я на ubuntu открывал, там текста не было

[Виталий Б]

pogromist, я только в windows проверял документ, но в firefox текста не было, хотя в chrome и acrobat был, но не стал разбираться в причинах. Просто заметил что в одном же случае у вас работает через копирование страницы, его и решил использовать. Видимо дело в различиях pdf viewer в самом firefox и chrome-подобных.

[Виталий Б]

Возможно можно попробовать не через embed-вставку, а циклом по страницам использовать drawText. Но последнее операция мне кажется тяжелее по ресурсам. Стоит проверить на большом документе с большим количеством страниц, какой способ дольше и кушает больше ресурсов.