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
Related
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
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.
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
I want to show a video which starts to run automatically and loops infinitely in my adobe portfolio website. I tried using YouTube embedded video with autoplay and loop options (see below code), however, every time the video ends there is a black refresh screen before it starts again which ruins the appearance of my website. The video format I'm using is .mp4. I know that with .gif file this problem can be solved, however, the video quality will not be sufficient. I tried downloading the video into the portfolio website directly, however, I couldn't make it loop or autoplay.
I would appreciate your help in this matter.
Thanks, Tal
The code:
<iframe width="1920" height="1080"
src="https://www.youtube.com/embed/youtubelink?rel=0&autoplay=1&controls=0&loop=1&playlist=youtubelink&controls=0&showinfo=0"
frameborder="0" allowfullscreen>
</iframe>
After some research I've finally got it working, the solution is to use the API iframe embed code (https://developers.google.com/youtube/iframe_api_reference) and instead of using the loop parameter you make use of the onPlayerStateChange function. Here is a code example:
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId: '<?php the_field('homepage_video_background_id'); ?>',
playerVars: {
modestbranding: 0,
autoplay: 1,
controls: 0,
showinfo: 0,
wmode: 'transparent',
branding: 0,
rel: 0,
autohide: 0,
origin: window.location.origin
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data === YT.PlayerState.ENDED) {
player.playVideo();
}
}
</script>
This method still flashes an instant black screen before restarting the video. If you need a smoother loop use this;
'onStateChange': function (event) {
var YTP=event.target;
if(event.data===1){
var remains=YTP.getDuration() - YTP.getCurrentTime();
if(this.rewindTO)
clearTimeout(this.rewindTO);
this.rewindTO=setTimeout(function(){
YTP.seekTo(0);
},(remains-0.1)*1000);
}
}
I'm trying to figure out this problem myself. I'm currently using Adobe Portfolio.
Are we allow to add code within the Embed box?
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: