I have figma design 2380х3368.
So, I create pdf with such parameters:
const doc = new jsPDF({orientation: 'portrait',unit: 'px', userUnit: 300, format: [2780, 3368]});
and:
doc.html(pageTemplate.querySelector('html'), {
callback: function(doc) {
doc.save('pdf-template.pdf');
},
margin: [0,0,0,0],
});
But this size is too big for printing pdf. I want dpi 300, so it would be ok, but I can't find where to put this in jsPDF
Related
How to check the quality of image in react native like if I want to take 60%. Quality image so how to get it
I tried it through pixel resolution but it didn't work
If you are using react-native-image-picker for uploading images, you can set maxWidth, maxHeight or quality of image for reducing the size in options.
const options = {
title: 'Select Picture',
storageOptions: {
skipBackup: true,
path: 'images',
},
maxWidth: 500,
maxHeight: 500,
quality: 0.5,
};
Or if you want to fit in the image in any View you can use resizeMode property of Image which has the type enum('cover', 'contain', 'stretch', 'repeat', 'center').
you can user react-native-image-picker library and can restrict user for image quality to upload and you can edit rest of the parameters on the basis of your requirements.
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: "Images",
allowsEditing: true,
base64: true,
quality: 0.6,
});
if (!result.cancelled) {
const fileSize = result.base64.length * (3 / 4) - 2;
if (fileSize > 6000000) {
setFileSizeError(true);
} else {
setFileSizeError(false);
const base64 = `data:image/png;base64,${result.base64}`;
await dispatch(myExampleAction(base64));
}
}
I am trying to use jsPdf to generate a pdf from an html string.
I am able to generate pdf using the code below.
const generatePDF = () => {
const pdf = new jsPDF({
orientation: "p",
unit: "pt",
format: "a4",
});
const width = pdf.internal.pageSize.getWidth();
pdf
.html(htmlContent, {
width: width,
windowWidth: 794,
margin: [58, 80, 52, 80],
html2canvas: { scale: 0.57 },
})
.then(() => {
pdf.save('test.pdf');
});
};
However, i think the page break is now working as expected. in some pages, text is split between pages like this
[![enter code here][1]][1]
Anyone has a clue how to fix this?
You should probably use html2pdf instead of jspdf. It uses jspdf but is easier to use. Add a page break and it should be ok.
How to add custom font in Jspdf with react? I tried every possible solution but nothing is working.I am stuck here.
convert your font.ttf file to js file using a this site : https://peckconsulting.s3.amazonaws.com/fontconverter/fontconverter.html
then take the font name and type,
export the the callAddFont function and call it where you want .
//this in the js file we generated from
//peckconsulting.s3.amazonaws
var font ".....
.....
.....";
var callAddFont = function () {
this.addFileToVFS("Calibri Bold-normal.ttf",
font);
this.addFont("Calibri Bold-normal.ttf","Calibri
Bold", "normal");
};
export { callAddFont };
// your component
import { callAddFont } from "./fonts/Calibri
Bold-normal";
.....
.....
jsPDF.API.events.push(["addFonts",
callAddFont]);
var doc = new jsPDF("l", "mm", [220, 250]);
doc.setFont("Calibri Bold", "normal");
doc.text("example")
Frankly working with fonts in jsPDF is a real pain in the back. In most cases I personally prefer to use rasterizehtml or html2pdf in complex with jsPDF. However, if you have no choice, I recommend watching this example
function createPDF() {
const doc = new jsPDF({
unit: "pt",
orientation: "p",
lineHeight: 1.2
});
doc.addFont("Arimo-Regular.ttf", "Arimo", "normal");
doc.addFont("Arimo-Bold.ttf", "Arimo", "bold");
doc.setFont("Arimo");
doc.setFontType("normal");
doc.setFontSize(28);
doc.text("Hello, World!", 100, 100);
doc.setFontType("bold");
doc.text("Hello, BOLD World!", 100, 150);
doc.save("customFonts.pdf");
}
The code is clear but it's doesn't matter... Pay attention on Pen's Settings:
So the answer is using jspdf-customfonts and its tool makeFont
node makeFonts.js - to create a new dist/default_vfs.js
I want to download a pdf file with Arabic fonts in react and haven't found any solution. I am currently using jsPdf but it's not rendering Arabic font's properly
let doc = new PDFDocument
let doc = new pdf();
doc.setFontSize(10);
doc.rect(20, 20, doc.internal.pageSize.getWidth() - 40,
doc.internal.pageSize.getHeight() - 40, 'S');
doc.setTextColor(128,0,128);
doc.text("Date", 30, 25);
doc.text(this.state.date, 50, 25);
doc.text("السلام عليكم", 30, 35);
doc.text("Quantity", 120, 35);
let distance = 30;
doc.save("data.pdf");
Thanks in advance
First download a desired font. Then go to https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html
and convert & download the file. Move it to your project directory and import it in the desired module.
You can also take the large string and put it in a variable const myFont = "VVV....VVV"
Then use it like this.
doc.addFileToVFS("MyFont.ttf", myFont);
doc.addFont("MyFont.ttf", "MyFont", "normal");
doc.setFont("MyFont");
Now you will need to right-align the text.
doc.text("Arabic Text", 200, 20, "right");
//OR
doc.text("Arabic Text", 200, 20, { align : "right" } );
/*
200 is the x coordinate and marks the starting position of the text from right.
y coordinate is the distance from the top of the page.
*/
Did you try adding {lang: 'value'} Option ?
doc.text(['لا إله إلا الله محمد رسول الله', 'لا إله إلا الله', 'a'], 100, 100, { lang: 'ar' });
The Arabic font can be printed into pdf by following these steps
Convert HTML to canvas using html2canvas
Convert the image to pdf using jspdf
const input = document.getElementById('divIdToPrint');
html2canvas(input)
.then((canvas) => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF();
pdf.addImage(imgData, 'PNG', 0, 0);
pdf.save("download.pdf");
});
Details in this blog
Demo link on Stackblitz
Add this styling to the wrapper object to properly render arabic font:
letter-spacing: normal !important;
source : Arabic font rendering
As the image is large, the response is slow, so must limit! How to do it? thanks!
var editor = new Quill('#postContent', {
modules: {
toolbar: '#toolbar-container'
},
theme: 'snow',
//placeholder: '不超过3000字...',
});
Sure can, I made a Quill module to compress images once they are added to the Quill editor (Pasted, Uploaded, Dragged). You can adjust the compression and quality of the compression too.
https://github.com/benwinding/quill-image-compress
import ImageCompress from 'quill-image-compress';
Quill.register('modules/imageCompress', ImageCompress);
const quill = new Quill(editor, {
// ...
modules: {
// ...
imageCompress: {
quality: 0.7, // default
maxWidth: 1000, // default
maxHeight: 1000, // default
imageType: 'image/jpeg', // default
debug: true, // default
}
}
});
Yes he can. When you add your image, use :
quill.insertEmbed(0, 'image', value, 'user'); // to insert the image
quill.formatText(0, 1, 'width', '300px'); //to limit the width
This is not possible at the moment, you would have to create a custom image handler. Feel free to open a feature request.
I gave him this solution, it is not the right one, but it works temporarily:
I modified quill.js and add this validation:
var maxSize = 2097152; // Maximum limit of 2mb (2,097,152 kb)
var fileSize = fileInput.files[0].size;
if (fileSize <= maxSize) { .... }
Image example of quill.js: