error : null is not an object evaluating '_PDFLib.default.createPDF'
https://github.com/Hopding/react-native-pdf-lib
I use the pdf library, can you tell me why the error occurs?
If you use await(const docsDir = await PDFLib.getDocumentsDirectory();), you get an error message like this: error - Can not use keyword 'await' outside an async function.
If you know how to create a pdf file, please let me know.
pdfButton = () => {
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',
});
//It's like a problem.
// const docsDir = await PDFLib.getDocumentsDirectory();
const pdfPath = './data/ex.pdf'; //path to create pdf folder
PDFDocument
.create(pdfPath)
.addPages(page1)
.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!
});
The pdfButton function must be an async function
pdfButton = async () => {
...
const docsDir = await PDFLib.getDocumentsDirectory();
const pdfPath = `${docsDir}/ex.pdf`;
}
Related
For a digital artwork I'm generating a canvas element in Vue which draws from an array of multiple images.
The images can be split in two categories:
SVG (comes with a fill-color)
PNG (just needs to be drawn as a regular image)
I came up with this:
const depict = (options) => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const myOptions = Object.assign({}, options);
if (myOptions.ext == "svg") {
return loadImage(myOptions.uri).then((img) => {
ctx.drawImage(img, 0, 0, 100, 100);
ctx.globalCompositeOperation = "source-in";
ctx.fillStyle = myOptions.clr;
ctx.fillRect(0, 0, 100, 100);
ctx.globalCompositeOperation = "source-over";
});
} else {
return loadImage(myOptions.uri).then((img) => {
ctx.fillStyle = myOptions.clr;
ctx.drawImage(img, 0, 0, 100, 100);
});
}
};
this.inputs.forEach(depict);
for context:
myOptions.clr = the color
myOptions.uri = the url of the image
myOptions.ext = the extension of the image
While all images are drawn correctly I can't figure out why the last fillStyle overlays the whole image. I just want all the svg's to have the fillStyle which is attached to them.
I tried multiple globalCompositeOperation in different orders. I also tried drawing the svg between ctx.save and ctx.restore. No succes… I might be missing some logic here.
So! I figured it out myself in the meantime :)
I created an async loop with a promise. Inside this I created a temporary canvas per image which I then drew to one canvas. I took inspiration from this solution: https://stackoverflow.com/a/6687218/15289586
Here is the final code:
// create the parent canvas
let parentCanv = document.createElement("canvas");
const getContext = () => parentCanv.getContext("2d");
const parentCtx = getContext();
parentCanv.classList.add("grid");
// det the wrapper from the DOM
let wrapper = document.getElementById("wrapper");
// this function loops through the array
async function drawShapes(files) {
for (const file of files) {
await depict(file);
}
// if looped > append parent canvas to to wrapper
wrapper.appendChild(parentCanv);
}
// async image loading worked best
const loadImage = (url) => {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = () => reject(new Error(`load ${url} fail`));
img.src = url;
});
};
// depict the file
const depict = (options) => {
// make a promise
return new Promise((accept, reject) => {
const myOptions = Object.assign({}, options);
var childCanv = document.createElement("canvas");
const getContext = () => childCanv.getContext("2d");
const childCtx = getContext();
if (myOptions.ext == "svg") {
loadImage(myOptions.uri).then((img) => {
childCtx.drawImage(img, 0, 0, 100, parentCanv.height);
childCtx.globalCompositeOperation = "source-in";
childCtx.fillStyle = myOptions.clr;
childCtx.fillRect(0, 0, parentCanv.width, parentCanv.height);
parentCtx.drawImage(childCanv, 0, 0);
accept();
});
} else {
loadImage(myOptions.uri).then((img) => {
// ctx.fillStyle = myOptions.clr;
childCtx.drawImage(img, 0, 0, 100, parentCanv.height);
parentCtx.drawImage(childCanv, 0, 0);
accept();
});
}
});
};
drawShapes(this.inputs);
I got this { _40: 0, _65: 0, _55: null, _72: null } returned from Async/Await function when trying to get the original size of an image. Refer https://www.npmjs.com/package/react-native-image-size for the function usage.
Here is my code.
getImgSize = async (url) => {
const {width, height} = await ImageSize.getSize(url);
const imgSize = { width: width, height: height }
console.log(imgSize) // result is { width: 950, height: 634 }
return imgSize;
}
function getImage(){
var imgSize = getImgSize("https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzEwNC84MzAvb3JpZ2luYWwvc2h1dHRlcnN0b2NrXzExMTA1NzIxNTkuanBn");
console.log(imgSize) // result after returned { _40: 0, _65: 0, _55: null, _72: null }
}
I expected the result to be something like { width: 950, height: 634 } but the result I mentioned been returned instead.
You are calling an async function which means it's a promise. You gotta wait for the result.
So either use await
getImage = async () => {
var imgSize = await getImgSize("https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzEwNC84MzAvb3JpZ2luYWwvc2h1dHRlcnN0b2NrXzExMTA1NzIxNTkuanBn");
console.log(imgSize);
}
or handle it this way
getImage = () => {
getImgSize('https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzEwNC84MzAvb3JpZ2luYWwvc2h1dHRlcnN0b2NrXzExMTA1NzIxNTkuanBn').then((imgSize) => {
console.log(imgSize);
});
}
You need to add await and async function:
getImgSize = async (url) => {
const {width, height} = await ImageSize.getSize(url);
const imgSize = { width: width, height: height }
console.log(imgSize) // result is { width: 950, height: 634 }
return imgSize;
}
async function getImage(){
var imgSize = await getImgSize("https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzEwNC84MzAvb3JpZ2luYWwvc2h1dHRlcnN0b2NrXzExMTA1NzIxNTkuanBn");
console.log(imgSize) // result after returned { _40: 0, _65: 0, _55: null, _72: null }
}
You must use async with await or use the then() => against it lets look at that and use it where you need to wait .
Try it
getImgSize("<Image URL>")
.then((imgSize)=>console.log(imgSize))
or put it in async/await
getImage = async () => {
var imgSize = await getImgSize("<Image URL>");
console.log(imgSize);
}
Used Library: dart_pdf After searching I found the same issue in GITHUB but unable to resolve the issue. I tried this but blurry image appears. Please help!!
ByteData data = await rootBundle.load('assets/test.jpg');
var codec = await instantiateImageCodec(data.buffer.asUint8List());
var frame = await codec.getNextFrame();
var imageBytes = await frame.image.toByteData();
PdfImage assetImage = PdfImage(pdf.document,
image: imageBytes.buffer.asUint8List(), width: 86, height: 80);
Rendered Image:
Use this instead:
final PdfImage assetImage = await pdfImageFromImageProvider(
pdf: pdf.document,
image: const AssetImage('assets/test.jpg'),
);
This function will create your pdf with image and custom data
var pdf = new pw.Document();
Future<pw.Document> createPDF() async {
var assetImage = pw.MemoryImage(
(await rootBundle.load('assets/images/delivery.png'))
.buffer
.asUint8List(),
);
pdf.addPage(pw.Page(
pageFormat: PdfPageFormat.a4,
build: (pw.Context context) {
var width = MediaQuery.of(this.context).size.width;
var height = MediaQuery.of(this.context).size.height;
return pw.Container(
margin: pw.EdgeInsets.only(top: height * 0.1),
child: pw.ListView(
children: [
// your image here
pw.Container(
height: height * 0.25, child: pw.Image(assetImage)),
// other contents
pw.Row(
mainAxisAlignment: pw.MainAxisAlignment.spaceAround,
children: [
pw.Text("order Id:"),
pw.Text(widget.doc['orderId']),
],
),
],
),
);
}));
return pdf;
}
use this function to save
Future savePdf(pw.Document pdfnew) async {
String pdfName;
File file;
try {
var documentDirectory = await AndroidPathProvider.downloadsPath; // for android downloads folder
// var localDirectory = await getApplicationDocumentsDirectory(); // for local directory
setState(() {
pdfName = "your_pdf_name";
});
file = File("$documentDirectory/$pdfName.pdf");
await file.writeAsBytes(await pdf.save());
return file.path;
} catch (e) {
print(e);
}
}
I am using the jspdf library to create a pdf and its working out great. I am now trying to append to that pdf another existing pdf. At the moment when my user clicks the download button it fires off two separate downloads. I was thinking that a work around might be creating two images and adding them to my pdf created with Jspdf. Has anyone appended an existing pdf to a pdf generated using jspdf?
$(document).ready(function () {
var doc = new jsPDF('p', 'pt', 'letter');
var imgData = 'cats.jpg'
var specialElementHandlers = {
'#content': function (element, renderer) {
return true;
}
};
$('#cmd').click(function () {
doc.addImage(imgData, 'JPEG', 0, 250, 615, 200);
doc.fromHTML($('#content').get(0), 0, 0, {
'elementHandlers': specialElementHandlers
});
doc.save('TemporaryIdCard.pdf');
});
});
I ended up hacking an answer from here.
Not thrilled about it but it works. I created images from the content in the PDF I was trying to append and then added each as a page to my doc
var doc = new jsPDF('p', 'pt', 'letter');
var imgData = 'cats.jpeg';
var imgData2 = 'dogs.jpeg';
var imgData3 = 'kittens.jpeg';
var specialElementHandlers = {
'#content': function (element, renderer) {
return true;
}
};
var pageHeight = doc.internal.pageSize.height;
var y = 800;
var x = 800;
$('#cmd').click(function () {
doc.addImage(imgData, 'JPEG', 0, 250, 615, 200);
doc.fromHTML($('#content').get(0), 0, 0, {
'elementHandlers': specialElementHandlers
});
if (y >= pageHeight) {
doc.addPage();
doc.addImage(imgData3, 'JPEG', 45, 45, 500, 550);
y = 0;
}
if (x >= pageHeight) {
doc.addPage();
doc.addImage(imgData2, 'JPEG', 50, 70, 500, 500);
x = 0;
}
doc.save('TemporaryIdCard.pdf');
});
here is the script code:
var page = require('webpage').create();
page.paperSize = {
format: 'A4',
orientation: "landscape"
};
page.open('http://www.google.com', function () {
var arr = page.evaluate(function () {
var pageWidth = document.body.clientWidth;
var pageHeight = document.body.clientHeight;
return [pageWidth, pageHeight];
});
console.log('pagwWidth: ' + arr[0] + '; pageHeight: ' + arr[1]);
page.render('google.pdf');
phantom.exit();
});
I'm trying to get clientWidth and clientHeight of document.body page. When I exec this script I'm getting the folowing values:
pagwWidth: 400; pageHeight: 484
Why is the width above is 400px? I think I should be wider.
Thank you for the reply. But then I don't understand the following thing. When I use viewportSize = {width: 1024, height: 800}
var page = require('webpage').create();
page.paperSize = {
format: 'A4',
orientation: "landscape"
};
page.viewportSize = {width: 1024, height: 800};
page.open('http://www.google.com', function () {
page.render('google.pdf');
phantom.exit();
});
I get the following file:
But if I use viewportSize = {width: 400, height: 400}
var page = require('webpage').create();
page.paperSize = {
format: 'A4',
orientation: "landscape"
};
page.viewportSize = {width: 400, height: 400};
page.open('http://www.google.com', function () {
page.render('google.pdf');
phantom.exit();
});
I get the same:
So I don't understand how does viewportSize affect to the view?
The document is affected by the viewport size and not by the paper size. Think along this line, how a web page looks like in your web browser has nothing to do with your current printer setting.
Use viewportSize if you want to influence the page layout:
page.viewportSize = { width: 1024, height: 800 };