Hopding / pdf-lib

Create and modify PDF documents in any JavaScript environment
https://pdf-lib.js.org
MIT License
6.89k stars 656 forks source link

Pdf not saved (in Device file ) in React Native #1543

Closed vipulparmarmt closed 11 months ago

vipulparmarmt commented 11 months ago

What were you trying to do?

I have trying to save pdf by doing below code but can't able to save the modifed pdf on local device of android and ios in React Native

How did you attempt to do it?

// Code of Save the Edited Pdf file in local device import {degrees, PDFDocument, rgb, StandardFonts} from 'pdf-lib'; import RNFS from 'react-native-fs';

const editPdf = async () => { const url = 'https://pdf-lib.js.org/assets/with_update_sections.pdf'; const arrayBuffer = await fetch(url).then((res) => res.arrayBuffer()); const pdfDoc = await PDFDocument.load(arrayBuffer);

// Embed the Helvetica font
const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);

// Get the first page of the document
const pages = pdfDoc.getPages();
const firstPage = pages[0];

console.log('firstPage====>', firstPage);

// Get the width and height of the first page
const {width, height} = firstPage.getSize();

// Draw a string of text diagonally across the first page
firstPage.drawText('This text was added with JavaScript!', {
  x: 5,
  y: height / 2 + 300,
  size: 50,
  font: helveticaFont,
  color: rgb(0.95, 0.1, 0.1),
  rotate: degrees(-45),
});

const pdfBytes = await pdfDoc.save();

const path = RNFS.DownloadDirectoryPath;

RNFS.copyFile(pdfBytes, path);

console.log('Saved pdf=====>', pdfBytes);

};

Above i have written the whole code of tying to edit the pdf file in react native using this package and saved to local files on android and ios

What actually happened?

pdf is Loaded and edited but i think saved not happening on device of android and ios

What did you expect to happen?

Expect To save the Edited Pdf on Device of Android or ios In React Native

How can we reproduce the issue?

Thank for support

Version

1.17.1

What environment are you running pdf-lib in?

React Native

Checklist

Additional Notes

Please HELP me to solve this issue after edited pdf i want that in my android and ios local device @Hopding (Andrew Dillon)

dilshadansari12 commented 11 months ago

is this package working perfectly in react native?

vipulparmarmt commented 11 months ago

Yes @dilshadansari12 as of now its working Great For editing pdf and put the form field on pdf

vipulparmarmt commented 11 months ago

Using this method you can save The pdf file on Your local device android and ios ` import RNFetchBlob from 'react-native-blob-util';

const pdfBytes = await pdfDoc.save();
const pdfDataUri = await pdfDoc.saveAsBase64({dataUri: true});

   savePdfFile(pdfDataUri)

  const savePdfFile = (pdfUrl: string) => {
const dirs = RNFetchBlob.fs.dirs;
console.log('Saved Pdf Files====>', dirs);
const filePath = `${dirs.DownloadDir}/${new Date().toISOString()}.pdf`;
RNFetchBlob.fs
  .writeFile(filePath, pdfUrl.split(',')[1], 'base64')
  .then(() => {
    console.log('Saved Successfully====>');
  })
  .catch((err) => {
    console.log('Saved err====>', err?.message);
  });

};

`