I am building an iOS app with React native and I want to have a button which when clicked it will export some text data into a pdf file.
The problem is that I use this library and I get the following error.
My code is the following:
exportPDF = async () => {
const page1 = PDFPage
.create()
.setMediaBox(200, 200)
.drawText('You can add text and rectangles to the PDF!', {
x: 5,
y: 235,
color: '#007386',
})
.drawRectangle({
x: 25,
y: 25,
width: 150,
height: 150,
color: '#FF99CC',
})
.drawRectangle({
x: 75,
y: 75,
width: 50,
height: 50,
color: '#99FFCC',
});
const page2 = PDFPage
.create()
.setMediaBox(250, 250)
.drawText('You can add JPG images too!')
// Create a new PDF in your app's private Documents directory
const docsDir = await PDFLib.getDocumentsDirectory();
const pdfPath = `${docsDir}/sample.pdf`;
PDFDocument
.create(pdfPath)
.addPages(page1, page2)
.write() // Returns a promise that resolves with the PDF's path
.then(path => {
console.log('PDF created at: ' + path);
// Do stuff with your shiny new PDF!
}).catch(error => console.log(error));
}
Does anybody know how to fix the unhandled promise rejection?
Related
I am trying to generate PDF from image path in react native so i am using below plugin for that
https://www.npmjs.com/package/react-native-image-to-pdf/v/1.2.0
As per above doc i configure all the thing and below is my code
const myAsyncPDFFunction = async () => {
try {
console.log('Call a');
let path ='file:///Users/macminiharshalk/Library/Developer/CoreSimulator/Devices/FADDF530-05FD-4A0E-9E61-C6AEDB719955/data/Containers/Data/Application/37B8FE42-B23A-4018-865F-F57670B3411E/tmp/606C88B3-5759-4942-A544-1231A0C17532.jpg';
const options = {
imagePaths: [path],
name: 'PDFName',
maxSize: {
// optional maximum image dimension - larger images will be resized
width: 900,
height: Math.round(
(Dimensions.get('window').height / Dimensions.get('window').width) *
900,
),
},
quality: 0.7, // optional compression paramter
// targetPathRN: "/storage/emulated/0/Download/", // only for android version 9 and lower
//for versions higher than 9 it is stored in (Download/img-to-pdf/)
};
console.log("options-->", options);
const pdf = await RNImageToPdf.createPDFbyImages(options);
console.log('PDF URIs-->', pdf);
console.log(pdf.filePath);
} catch (e) {
console.log(e);
}
};
When i console log i can able to see pdf path as below
/Users/macminiharshalk/Library/Developer/CoreSimulator/Devices/FADDF530-05FD-4A0E-9E61-C6AEDB719955/data/Containers/Data/Application/37B8FE42-B23A-4018-865F-F57670B3411E/Documents/PDFName.pdf
When i console option parameter it is showing as below
{"imagePaths": ["file:///Users/macminiharshalk/Library/Developer/CoreSimulator/Devices/FADDF530-05FD-4A0E-9E61-C6AEDB719955/data/Containers/Data/Application/37B8FE42-B23A-4018-865F-F57670B3411E/tmp/606C88B3-5759-4942-A544-1231A0C17532.jpg"], "maxSize": {"height": 1948, "width": 900}, "name": "PDFName", "quality": 0.7}
But when i open PDF image is not copy it is blank PDF so any idea how can i show image in PDF ?
please try
const newPath = path.replace('file://', '');
I am trying to do an AR app with react native and expo and I followed this tutorial(https://blog.expo.dev/arkit-in-react-native-tutorial-the-basics-9f839539f0b9) everything worked great until I got to the Ar camera section. when I added this line of code - arTrackingConfiguration={AR.TrackingConfigurations.World};
my app crashed and I got this error:
TypeError: undefined is not an object (evaluating '_expoThree.AR.TrackingConfiguration')
this is my code:
import ExpoTHREE, { THREE, AR as ThreeAR} from 'expo-three';
import { View as GraphicsView } from 'expo-graphics';
onContextCreate = async ({gl, scale: pixelRatio, width, height, }) => {
// Insert 3D universe
this.renderer = new ExpoTHREE.Renderer({
gl,
pixelRatio,
width,
height,
});
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
const geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1);
const material = new THREE.MeshPhongMaterial({
color: 0xff00ff,
});
this.cube = new THREE.Mesh(geometry, material);
this.cube.position.z = -0.4
this.scene.add(this.cube);
this.scene.add(new THREE.AmbientLight(0xffffff));
}
onRender = () => {
this.renderer.render(this.scene, this.camera);
};
return (
<GraphicsView
style={{ flex: 1 }}
onContextCreate={this.onContextCreate}
onRender={this.onRender}
isArEnabled
arTrackingConfiguration={AR.TrackingConfiguration.World}
/>
);
}
I saw some errors that are the same but the solutions did not match my situation, I think that the AR variable from expo three is not included or the functions from the AR are not updated in the package, I didn't find a suitable solution for my errors. if someone has a solution to my problem please reach out to me. thanks to everyone:)
I want to convert base64 the picture to phone for save my db,
i select my app in local gallery , get my data, like =>
> filename: "IMG_0005.JPG"
> height: 2002
> isStored: true
> playableDuration: 0
> uri: "assets-library://asset/asset.JPG?id=ED7AC36B-...-B6D696F4F2ED&ext=JPG"
> width: 3000
I want both ios and android to run as well, i try many library, most libraries support ios, did you know anything useful code to react-native library or another idea?
i found solution
--Edit--
import {
Image,
ImageStore,
ImageEditor,
} from 'react-native';
Image.getSize(image.uri, (width, height) => {
let imageSettings = {
offset: { x: 0, y: 0 },
size: { width: width, height: height }
};
ImageEditor.cropImage(image.uri, imageSettings, (uri) => {
ImageStore.getBase64ForTag(uri, (data) => {
console.log('base64 ==> ',data)
}, e => console.warn("getBase64ForTag: ", e))
}, e => console.warn("cropImage: ", e))
})
I want to check pdf file size with jspdf.js script. I need to display this on the screen before downloading file. Are there any possibilities?
function demoFromHTML(x = false) {
var pdf = new jsPDF('p', 'pt', 'letter');
source = $('#print')[0];
specialElementHandlers = {
'#bypassme': function (element, renderer) {
return true
}
};
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
pdf.fromHTML(
source,
margins.left,
margins.top, {
'width': margins.width,
'elementHandlers': specialElementHandlers
},
function (dispose) {
if(x){
pdf.output('dataurlnewwindow');
}else{
pdf.save('<?php the_title() ?>.pdf');
}
}, margins
);
}
Test this :
pdf.output('datauristring').length
It work for me
I've found a solution, It was pretty simple.
Maybe someone will use it:
pdf.output().length;
I'm using jsPDF to export a table to PDF, however I get a pdf with all the info displayed as a list, I'd like to have the pdf display the full table as seen on the HTML could someone help me see whats wrong with my code?
function demoFromHTML() {
var pdf = new jsPDF('p', 'pt', 'letter');
source = $('#customers')[0];
specialElementHandlers = {
'#bypassme': function(element, renderer) {
return true
}
};
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
pdf.fromHTML(
source,
margins.left,
margins.top, {
'width': margins.width, //
'elementHandlers': specialElementHandlers
},
function(dispose) {
pdf.save('Test.pdf');
}
, margins);
}