I am using jsPDF to convert HTML components into a PDF.
Below is the code for that,
var doc = new jsPDF({orientation: 'l',unit: 'px',format: [1250,1100],compress : true});
let component=document.getElementById('document');
doc.html(component,{
margin: [10, 0, 50, 0],
callback: function (doc) {
doc.save("report.pdf");
},
x: 0,
y: 0,
});
The resulting PDF looks like.
PDF PROBLEM
I expect jsPDF to move the component to the next page whenever its find that the size of the component is bigger than the rest of the current page.
Related
I use Vue2 and Vuex. My app draws a rectangle based on user input (length and width). I use mapState to get length and width from Vuex store. I can display those values in mainPage.vue so mapping and vuex works fine:
computed: {
...mapState("model2D", ["modelLength", "modelWidth"]),
},
The issue is when I try to refer to those values from mounted() - I set user input as rectangle length and width here (ZimModel.vue):
var line1 = new Line(this.modelLength, 1, black);
var line2 = new Line(this.modelWidth, 1, black);
but seems those vuex values are not passed here at all. When I return dimension in logs then I can see this:
r {x: 0, y: 0, width: 0, height: 0, setValues: ƒ ()…}
As you can see e.g. width is not assigned any value here. I use some 2D lib to draw shapes but I guess that regardless a library everything should work fine. I just simply pass vuex value. I don't know, maybe I'm doing sth wrong.
I add Sanbox here: https://codesandbox.io/s/vue-2-playground-vuex-2okckn?file=/src/components/ZimModel.vue:1218-1267
Main code where I try to draw a shape is located in ZimModel.vue component.
I am using jsPdf to export table data as pdf file, I have about 50 columns in my table.
but i am not able to see all columns in pdf. only few col are visible rest seems out of page, but there is no scrollbar in pdf file.
please suggest how to get a horizontal scrollbar on pdf page.
Below is my code snippet :
exportPDF(myTableHeaders,myTableData) {
const pdf = new jsPDF();
pdf.setFont("helvetica");
pdf.setFontSize(6);
;
let headerConfig = myTableHeaders.map((header) => ({
name: header.fieldName,
prompt: header.label,
width: 30,
align: "center",
fontSize: 6,
padding: 0,
}));
pdf.table(20, 30, myTableData, headerConfig);
pdf.save("pdf.pdf");
}
Below is snap :
how to add a logo properly in a pdf file with jspdf in vuejs?
I tried to use this addSvgAsImage function like this:
const doc = new jsPDF()
const logo = '/src/icons/svg/logo.svg'
doc.addSvgAsImage(logo, 20, 20, 50, 50, null, 'NONE', 0)
and I have this error:
canvg is not defined
at Object.et.addSvgAsImage
I finally used a png image like that:
const logo = require('#/icons/png/logo.png')
const doc = new jsPDF()
var imgLogo = new Image()
imgLogo.src = logo
doc.addImage(imgLogo, 'PNG', xCord, yCord, 24, 8)
How to create border in Header? I am using jspdf autotable to create table but cannot find any idea to apply border to header. Is there any hook that can be used to create header border?
You can use the header styles:
doc.autotable(columns, data, {
headerStyles: {
lineWidth: 1,
lineColor: [255, 0, 0]
}
});
As of today (version 3.5.25) the property name is headStyles and still different border widths is not supported.
Example:
autoTable(doc, {
headStyles: {
lineWidth: 0.5, // 1 is too thick for me
lineColor: [255, 0, 0] // Or gray level single value from 0-255
}
})
I use the imported method version (autoTable) in TypeScript.
I'm trying to create a graph-to-png converter with phantomjs, but having a hard time getting it to work. Almost every example I see out there uses some external URL as if all you ever do with it is scraping, and the documentation is terribly lacking.
To test out things, I created a very simple d3 function that adds an <svg> tag and a blue circle inside. Looking at other questions on SO and examples, I hooked it to onLoadFinish but that event never triggers.
I'm guessing I need to open the page, but open only uses a url, which isn't relevant for me (and again, the docs are completely lacking in information. Even when I see something I think might be relevant, my only choice is guesswork. This is ridiculous )
Here's my code:
var page = require('webpage').create();
var content = '<html>';
content += '<body>';
content += '<h1> test title </h1>';
content += '<div id="graph">';
content += '</div>';
content += '</body></html>';
page.content = content;
page.injectJs('lib/d3/d3.min.js');
page.onLoadFinish = function(status) {
console.log('loading finished'); // this never happens!
var svg = d3.select('#graph')
.append('svg')
.attr({'width': 100, 'height': 100});
var circle = svg
.append('circle')
.attr({ 'cx': 10, 'cy': 10, 'r': 10, 'fill': 'blue' });
page.render('test.png');
phantom.exit();
};
Any suggestions?
It's evaluate. That was the function I was looking for. It "evaluates the given function in the context of the web page".
Finally, it's working:
page.content = content;
page.injectJs('lib/d3/d3.min.js');
page.evaluate(function() {
var svg = d3.select('#graph')
.append('svg')
.attr({'width': 100, 'height': 100});
var circle = svg
.append('circle')
.attr({ 'cx': 10, 'cy': 10, 'r': 10, 'fill': 'blue' });
page.render('test.png');
phantom.exit();
};