We Keep Coding

JSPDF: Weird PDF Format

I am using jsPDF to convert html into PDF file.
This is what it looks like from the browser:
This is the PDF file:
Here is my code:
const doc = new jsPDF();
doc.html(document.getElementById('print-content')!, {
callback: function (doc) {
doc.save(activeSales?.ID + '.pdf');
},
});
How to make it responsive when generating the pdf?
I want to generate it in A4 width.

i know this is too late, but I faced the same issue before.
You can use another library called jsPDF-AutoTable which will make it easier for you to work with tables.
Here's the doc : https://github.com/simonbengtsson/jsPDF-AutoTable

Draft.js conversion without browser

I'm in the middle of migrating some saved editor text/data from another rich text editor (Quill) to using Draft.js. The data exist in files in a format digestible by the current text editor, and I would like to transform these files to Draft.js format.
All of the rich text editors have some sort of data-to-html and html-to-data conversion functions, which come in handy here.
My plan was to convert the current editor text/data to html using a converter of the current editor, and then convert the resulting html to the format supported by Draft.js using some converter from the Draft.js package.
However, it seems (I could be wrong) that all of the Draft.js converters require the browser in some form or another, so I'm unable to this as a backend/server-side application only. Is there a tool that I'm missing and/or is there another type of solution to this?
TL;DR:
editor_data --(phase 1)--> html --(phase 2)--> Draft.js_data
phase 2 seems to require browser, I would like to not involve browser

convert data from quill to markdown and then convert markdown back to draftjs accepted format, below code is an example of export and can be executed using node, follow the same logic for import
quill --> markdown --> draftjs
https://github.com/sstur/draft-js-utils
const {
convertFromRaw
} = require('draft-js');
const {stateToMarkdown} = require('draft-js-export-markdown');
const {draftToMarkdown} = require('markdown-draft-js');
const converter = () => {
const sampleMarkup =
{"blocks":[{"key":"dsf1t","text":"👍👎🏾 this isn't trueeeeeeeeeeeeeeeee","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[{"offset":0,"length":1,"key":0},{"offset":1,"length":2,"key":1}],"data":{}}],"entityMap":{"0":{"type":"emoji","mutability":"IMMUTABLE","data":{"emojiUnicode":"👍"}},"1":{"type":"emoji","mutability":"IMMUTABLE","data":{"emojiUnicode":"👎🏾"}}}} ;
const blocksFromHTML = convertFromRaw(sampleMarkup);
// const state = ContentState.createFromBlockArray(blocksFromHTML);
console.log('state: ', stateToMarkdown(blocksFromHTML));
console.log('state: ', draftToMarkdown(sampleMarkup));
}
converter();

Korean language not rendering on PDF while using JSPDF

I am using JSPDF library to generate pdf while working on korean language the letters are getting change in symbols and sometime empty. Could anyone please help me?
const doc = new jsPDF();
const myFont = ... // overhere i am inserting a string which is being generated using following link https://rawgit.com/MrRio/jsPDF/master/fontconverter/fontconverter.html(it's too long)
// add the font to jsPDF
doc.addFileToVFS("MyFont.ttf", myFont);
doc.addFont("MyFont.ttf", "MyFont", "normal");
doc.setFont("MyFont");

You can try directly print the HTML text element.
Shameless plug 😃:
generate-pdf-from-react-html

Download a 'data:' image/file using puppeteer and node.js

I'm trying to download an image using node.js and puppeteer but I'm running into some issues. I'm using a webscraper to gather the links of the images from the site and then using the https/http package to download the image.
This works for the images using http and https sources but some images have links that look like this (the whole link is very long so I cut the rest):
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAw8AAADGCAYAAACU07w3AAAZuUlEQVR4Ae3df4yU930n8Pcslu1I1PU17okdO1cLrTD+g8rNcvRyti6247K5NG5S5HOl5hA2uZ7du6RJEGYPTFy1Nv4RUJy0cWVkeQ9ErqqriHNrR8niZuVIbntBS886rBZWCGHVsNEFRQ5BloPCzGn2B+yzZMLyaP........
I'm not sure how to handle these links or how to download the image. Any help would be appreciated.

You need to first decode the url from base64 using node.js Buffer.
// the content type image/png has to be removed first
const data = 'iVBORw0KGgoAAAANSUhEUgAAAw8AAADGCAYAAACU07w3AAAZuUlEQVR4Ae3df4yU930n8Pcslu1I1PU17okdO1cLrTD+g8rNcvRyti6247K5NG5S5HOl5hA2uZ7du6RJEGYPTFy1Nv4RUJy0cWVkeQ9ErqqriHNrR8niZuVIbntBS886rBZWCGHVsNEFRQ5BloPCzGn2B+yzZMLyaP';
const buffer = new Buffer(data);
const base64data = buff.toString('base64');
// after this you will get the url string and continue to fetch the image

These are the base64 encoded images (mostly used for icons and small images).
you can ignore it.
if(url.startsWith('data:')){
//base 64 image
} else{
// an image url
}
if you really want to mess with base64 I can give you a workaround.
import { parseDataURI } from 'dauria';
import mimeTypes from 'mime-types';
const fileContent = parseDataURI(file);
// you probably need an extension for that image.
let ext = mimeTypes.extension(fileContent.MIME) || 'bin';
fs.writeFile("a random file"+"."+ext, fileContent.buffer, function (err) {
console.log(err); // writes out file without error, but it's not a valid image
});

Html DOM to Array Buffer to make BLOB for pdf?

I want to show my HTML DOM as pdf in new tab using BLOB. We can achieve this by calling a API which will return a blob but I want to do this without the involvement of any server side API. I am facing problems in converting my html string to ARRAY BUFFER. Here is the code on stackblitz you can test this and please let me know how to solve this. Thanks
generate pdf from html dom

Consider using TextEncoder, which can easily encode/decode Strings and ArrayBuffers:
const encoder = new TextEncoder(),
decoder = new TextDecoder(),
text = 'Hello',
textEncoded = encoder.encode(text),
textDecoded = decoder.decode(textEncoded);
console.log({ text, textDecoded, textEncoded });