I have a project in which i have to provide the user with a pdf generated using pdfkit and allowing users to download the same using blob. I am getting an error on doing so. Any help would be appreciated.
error-
TypeError: Blob is not a function
at BlobStream.toBlob (C:\Users\ws\node_modules\blob-stream\index.js:33:18)
Code Snippet:
var doc = new report();
var blobStream = require('blob-stream');
var stream = doc.pipe(blobStream());
doc.text('And here is some wrapped text...', 100, 300)
.font('Times-Roman', 13)
.moveDown()
.text('lorem', {
width: 412,
align: 'justify',
indent: 30,
columns: 2,
height: 300,
ellipsis: true
});
doc.end();
stream.on('finish',function(){
blob = stream.toBlob('Blob/pdf');
});
Related
I am trying to implement a QR code in a PDF document using PDFkit (https://github.com/foliojs/pdfkit) and node-qrcode (https://github.com/soldair/node-qrcode).
Implementing PDF document:
const doc = new PDFDocument({
margin: 0,
size: 'LETTER'
})
doc.pipe(fs.createWriteStream('/files/result.pdf'))
doc.pipe(res)
Creating QR code and adding it to the PDF:
var opts = {
errorCorrectionLevel: 'H',
type: 'image/png',
quality: 0.9,
margin: 1,
color: {
dark:"#000000",
light:"#FFFFFF"
}
}
QRCode.toDataURL('http://link.to.website', function (err, url) {
if (err) throw err
doc.image(url, 50, 45, { width: 50 })
console.log(url)
})
Close the PDF:
doc.end()
Console output of the url from QRCode is correctly formatted and no error messages from PDFKit:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAACECAYAAABRRIOnAAAAAklEQVR4AewaftIAAAOQSURBVO3BQY5jBxYDweSD7n/lHC+84OoDglTltocR8S/M/O2YKcdMOWbKMVOOmXLMlGOmHDPlmCnHTDlmyjFTjplyzJRjprz4UBJ+k8qTJHxC5R1JaCotCb9J5RPHTDlmyjFTXnyZyjcl4ZtUWhJaEppKS8InVL4pCd90zJRjphwz5cUPS8I7VN6RhG9S+U1JeIfKTzpmyjFTjpny4j9G5R0qLQnvUPkvOWbKMVOOmfLiPy4JTaUloam0JDSVloSm8m92zJRjphwz5cUPU/mTqbQkNJWWhG9S+ZMcM+WYKcdMefFlSfg3SUJTaUloKi0J70jCn+yYKcdMOWbKiw+p/EmS8CdR+Tc5ZsoxU46ZEv/CB5LQVFoSvknlSRKayjuS8AmVloRvUvlJx0w5ZsoxU158SKUloak8ScITlSdJaCotCU3lHSpPkvBEpSWhqbwjCU3lm46ZcsyUY6a8+GFJaCpPVFoSmsqTJLwjCU3lSRKaSktCU3lHEprKkyQ0lU8cM+WYKcdMefGhJDxRaUloKi0JTaUl4R0qLQnvSEJTaUloKk9UWhKayhOVloRvOmbKMVOOmfLihyWhqTxRaUloKt+k0pLwDpWWhCcq70jCbzpmyjFTjpny4h+WhCcqT5LwRKWptCQ0lZaEd6g8SUJTaUloKi0JTeWbjplyzJRjprz4MpWWhCcqT5LwiSQ0labyjiQ8UXmi8k1JaCqfOGbKMVOOmfLih6k8ScITlZaEpvIkCU+S0FSaypMktCQ0lZaET6i0JHzTMVOOmXLMlBf/MJWWhJaEptKS8E1JeKLyjiS8Q6Uloak0lW86ZsoxU46Z8uJDKt+k8ptU3pGEJyrvSEJLwj/pmCnHTDlmyosPJeE3qTSVloQnSXii0pLQVFoSniShqXwiCU9UPnHMlGOmHDPlxZepfFMSniThiUpLQlP5SSqfUPlNx0w5ZsoxU178sCS8Q+UTKt+k0pLwJAnflIR3qHzimCnHTDlmyov/MyotCU9Unqg8SUJTaUloKi0Jv+mYKcdMOWbKi/+YJDSVJyotCS0JTeUdKi0JTeUdKi0J33TMlGOmHDPlxQ9T+UkqT5LQVFoSnqg8ScITlSdJeKLym46ZcsyUY6a8+LIk/KYkNJVPqLQkNJWm8pOS8JuOmXLMlGOmxL8w87djphwz5Zgpx0w5ZsoxU46ZcsyUY6YcM+WYKcdMOWbKMVOOmfI/dLqWFdMR+T4AAAAASUVORK5CYII=
The problem is that no image is displayed in the produced PDF.
If I use any other functions (than doc.image), e.g. doc.text(), doc.circle() all elements works fine and added to the PDF.
Any idea how to solve this?
toDataURL() is a asynchronous method.
I didn't wait for it to complete.
Closed the PDF document after it completed, and that worked.
Is there a way to concat the result of an an html page converted with wkhtmltopdf-node inside a document page created with pdfkit in node.js, instead of just creating a pdf file from html?
const doc = new PDFDocument({
bufferPages:true,
toc: true,
margins: {
top: 125,
bottom: 50,
left: 50,
right: 50
}
});
doc.pipe(fs.createWriteStream('output.pdf'));
doc.addPage();
doc.text("HTML Content ")
// concat the result of this conversion inside doc instead of out.pdf
wkhtmltopdf(params.content, { pageSize: 'letter' }).pipe(fs.createWriteStream('out.pdf'));
Something like
doc.concat(wkhtmltopdf(params.content, { pageSize: 'letter' }));
I just upgraded fabricJs from 1.4.0 to 1.4.13 so that i can use SetSrc() of Image class and when i tried to run my application i got this error :"Cannot read property 'className' of null". Here is the line of code where the error originated from
const options = {
id: client.ProfileId,
class: 'img_wifiClient',
left: (transX + client_left) * canvasFabric.scale,
top: (transY + client_top) * canvasFabric.scale,
selectable: true,
hasBorders: false,
hasControls: false,
padding: 0,
perPixelTargetFind: true,
width: 24,
height: 24,
originX: 'center',
originY: 'center'
}
let image = new fabric.Image('');//*This is where the error originated from*
canvasFabric.add(image);
let src;
if (client.IconName === 'default.png' || client.IconName === null)
{
src = '/Icones/wifi.png';
}
else
{
src = `/Icones/${client.IconName}`;
}
image.setSrc(src, function () {
image.setCoords();
canvasFabric.renderAll();
}, options);
Any help would be appreciated!!
I added an img element with id = "myIcone" under the canvas element in the Html file and added the following lines of code and everything works.
let image_element = document.getElementById('myIcone');
let image = new fabric.Image(image_element);
canvasFabric.add(image);
The rest of the code is the same as in the question snippet
I want to add a image to mxGraph.
At my try I see the frame at the gui and inside the frame is the image text instead of the image.
How can I add a image to mxGraph?
My code looks like that:
const newDiv = document.createElement('div');
const parent = drawIoUi.editor.graph.getDefaultParent();
drawIoUi.editor.graph.getModel().beginUpdate();
const decodetSvg1 = btoa(this._svgTest);
let newChart: any;
try {
newChart = drawIoUi.editor.graph.insertVertex(parent, null, newDiv, 40, 140, 300, 200);
} finally {
const fullImg1 =
`<img alt="" style="width:100%; height:100%;" src="data:image/svg+xml;base64,` +
decodetSvg1 +
`">`;
newChart.setAttribute('label', fullImg1);
drawIoUi.editor.graph.getModel().endUpdate();
drawIoUi.editor.graph.refresh();
drawIoUi.editor.graph.container.focus();
}
And the result looks like that:
Use a shortened data URI in the cell style with an image shape, eg.
graph.insertVertex(parent, null, '', 20, 20, 80, 80,
'shape=image;image=data:image/svg+xml,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJFYmVuZV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI1MCAyNTAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI1MCAyNTA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4mI3hhOzxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+JiN4YTsJLnN0MHtmaWxsOiNhMmEyYTI7fSYjeGE7CS5zdDF7ZmlsbDojOGU4ZThlO30mI3hhOwkuc3Qye2ZpbGw6I0ZGRkZGRjt9JiN4YTs8L3N0eWxlPiYjeGE7PHRpdGxlPlplaWNoZW5mbMOkY2hlIDE8L3RpdGxlPiYjeGE7PHBhdGggY2xhc3M9InN0MCIgZD0iTTIzNy41LDIyNy45YzAsNS4zLTQuMyw5LjYtOS41LDkuNmMwLDAsMCwwLDAsMEgyMi4xYy01LjMsMC05LjYtNC4zLTkuNi05LjVjMCwwLDAsMCwwLDBWMjIuMSAgYzAtNS4zLDQuMy05LjYsOS41LTkuNmMwLDAsMCwwLDAsMGgyMDUuOWM1LjMsMCw5LjYsNC4zLDkuNiw5LjVjMCwwLDAsMCwwLDBWMjI3Ljl6Ii8+JiN4YTs8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMjM3LjUsMjI3LjljMCw1LjMtNC4zLDkuNi05LjUsOS42YzAsMCwwLDAsMCwwSDg5LjZMNDQuOCwxOTJsMjcuOS00NS41bDgyLjctMTAyLjdsODIuMSw4NC41VjIyNy45eiIvPiYjeGE7PHBhdGggY2xhc3M9InN0MiIgZD0iTTE5Ny4xLDEzOC4zaC0yMy43bC0yNS00Mi43YzUuNy0xLjIsOS44LTYuMiw5LjctMTJWNTEuNWMwLTYuOC01LjQtMTIuMy0xMi4yLTEyLjNjMCwwLTAuMSwwLTAuMSwwaC00MS43ICBjLTYuOCwwLTEyLjMsNS40LTEyLjMsMTIuMmMwLDAsMCwwLjEsMCwwLjF2MzIuMWMwLDUuOCw0LDEwLjgsOS43LDEybC0yNSw0Mi43SDUyLjljLTYuOCwwLTEyLjMsNS40LTEyLjMsMTIuMmMwLDAsMCwwLjEsMCwwLjEgIHYzMi4xYzAsNi44LDUuNCwxMi4zLDEyLjIsMTIuM2MwLDAsMC4xLDAsMC4xLDBoNDEuN2M2LjgsMCwxMi4zLTUuNCwxMi4zLTEyLjJjMCwwLDAtMC4xLDAtMC4xdi0zMi4xYzAtNi44LTUuNC0xMi4zLTEyLjItMTIuMyAgYzAsMC0wLjEsMC0wLjEsMGgtNGwyNC44LTQyLjRoMTkuM2wyNC45LDQyLjRoLTQuMWMtNi44LDAtMTIuMyw1LjQtMTIuMywxMi4yYzAsMCwwLDAuMSwwLDAuMXYzMi4xYzAsNi44LDUuNCwxMi4zLDEyLjIsMTIuMyAgYzAsMCwwLjEsMCwwLjEsMGg0MS43YzYuOCwwLDEyLjMtNS40LDEyLjMtMTIuMmMwLDAsMC0wLjEsMC0wLjF2LTMyLjFjMC02LjgtNS40LTEyLjMtMTIuMi0xMi4zICBDMTk3LjIsMTM4LjMsMTk3LjIsMTM4LjMsMTk3LjEsMTM4LjN6Ii8+JiN4YTs8L3N2Zz4=;');
You can use this tool to encode the SVG file.
I want to load different shapes in FabricJS based Canvas using loadSVGFromURL(), but can't. Documentation is also not complete on this. I just want a complete example. I can load it from string, but string creates spaces which creates problems when rendering. Here is my code:
var canvas = new fabric.Canvas('canvas');
fabric.loadSVGFromURL('BlueFlower.svg', function (objects) {
var SVG = fabric.util.groupSVGElements(objects, options);
canvas.add(SVG).centerObject(SVG).renderAll();
SVG.setCoords();
});
I have done an example on jsfiddle, that I create two objects and I load an svg image from url, you can take a look.
Here is an example
The snippet for load svg is this:
var site_url = 'http://fabricjs.com/assets/1.svg';
fabric.loadSVGFromURL(site_url, function(objects) {
var group = new fabric.PathGroup(objects, {
left: 165,
top: 100,
width: 295,
height: 211
});
canvas.add(group);
canvas.renderAll();
});