I'm trying to get snapshot of the table and generate a pdf using html2canvas and jsPDF in React. But the isssue is only the part of table that is visible gets generated where as horizontal and vertical scrollable part of table which is invisible is not getting in the pdf. Any help to this issue is highly appreciated. Thanks in advance.
html2canvas($("#canvas"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL(
'image/png');
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample-file.pdf');
}
});
Since I dont know exactly the page you are working with but I hope my code in old project can help you. Your problem may come from the width and heigh is not defined.
processPdf = () => {
const foo = document.getElementById('canvas');
html2canvas(foo)
.then((canvas) => {
var width = pdf.internal.pageSize.getWidth();
var height = pdf.internal.pageSize.getHeight();
const handledImage = canvas.toDataURL('image/png');
const pdf = new jsPDF('p', 'px', 'a4');
pdf.addImage(handledImage, 'JPEG', 0, 0, width, height);
pdf.save("test.pdf");
});
};
If you need to export table on a pdf file you shouldn't use html2canvas for that purpose. I think its better to use jsPDF and jspdf-autotable for exporting table to pdf.
example : Export to PDF in React-Table
Related
What is the id of this canvas: carstenschaefer.github.io/DrawerJs/examples/fullscreen I want to add download button to under this canvas. I imported the source code into vscode. I tried various download codes but none of them worked. I think I'm writing the id wrong.
document.getElementById('download').addEventListener('click', ()=> {
var canva = document.getElementById("canvas");
var image = canva.toDataURL("image/png").replace("image/png", "image/octet-stream");
var element = document.createElement('a');
var filename = 'test.png';
element.setAttribute('href', image);
element.setAttribute('download', filename);
element.click();
})
When you create an instance of drawer
const drawer = new DrawerJs.Drawer(null, { ...options });
You can call
drawer.api.getCanvasAsImage()
To get the canvas converted to base64 which you can then use it to Post to a backend server or download it.
Took at look at download.js maybe you could try using it to help with saving.
I have a very lengthy form in angular and i need to convert it into pdf. Since it is a very lengthy form i have to divide it into smaller chunks and show it in multiple pages in pdf. How can i achieve it. And i also need to add header and footer for every page.
I am using jsPDF and dom-to-image packages for pfd conversion.
Following is the code i wrote for pdf conversion:
exportPdf(){
var doc = new jsPDF('potrait','px','a4');
let imageData= new Image();
imageData.src='../../assets/images/testimg.png';
var filename="application";
var options={};
var img;
var newImage;
var node = document.getElementById('formContent');
var numRowsToCut=3;
var imagePieces=[];
domtoimage.toPng(node, { }).then(function(dataUrl)
{
img = new Image();
img.src = dataUrl;
newImage = img.src;
img.onload = function(){
var pdfWidth = img.width;
console.log("image width "+pdfWidth);
var pdfHeight = (img.height)/3;
var width = doc.internal.pageSize.getWidth();
console.log("width "+width);
var height = doc.internal.pageSize.getHeight();
for(var y = 0; y < numRowsToCut; ++y) {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.drawImage(newImage, 0, y *pdfHeight, pdfWidth,pdfHeight, 0, 0,pdfWidth,pdfHeight);
imagePieces.push(canvas.toDataURL());
}
var docDefinition = {
content: [{
image: imagePieces[0],
width: 500,
pagebreak:'after'
},
{
image: imagePieces[1],
width: 500,
pagebreak:'after'
},
{
image: imagePieces[0],
width: 500,
pagebreak:'after'
}],
pageBreakBefore: function(currentNode) {
return currentNode.style && currentNode.style.indexOf('myDivClass') > -1;
}
};
pdfMake.createPdf(docDefinition).download(filename);
};
})
.catch(function(error) {
// Error Handling
console.log(error);
});
}
Any help will be appreciated.
I got the solution from a tutorial. Posting it here since it may help someone else.
Generate Multipage PDF using Single Canvas of HTML Document using jsPDF
How to Create Multipage PDF from HTML Using jsPDF and html2Canvas
I'm using new Image() to preload some images,
my code:
var img = new Image();
img.onload = () => {
console.log('ok')
}
img.src = 'xxx'
but I notice that, sometimes the response type is 'png', and sometimes it is 'text/plain', why ?
My project is based on '#vue/cli' v3
I tried to create a minimal html demo, it gets 'png' type every time;
I tried to create a minimal 'create-react-app' demo, it also works fine;
I am working with the Vaadin framework (https://vaadin.com/home) integrating d3.js to my java code (analogous to http://www.rapidpm.org/2013/10/using-javascript-libraries-d3-in-vaadin.html). Basically, this Javascript code is bound to a Java class and reacts to a change of state in said Java class.
==================================================================================
So, when the state of the java diagram-class changes, this.conStateChange-method is called: javascript fetches a new String from the java class (var string = this.getState().string;), parses it to JSON and renders a graph.
A button click will trigger the state change by changing the String in the java class (!), thereby triggering the described method and rendering the new graph from the new JSON-parsed-String.
...THEORETICALLY... however, in reality, if I click that button once the graph disappears. Only if I click the button again, the new graph is rendered.
/*not so interesting code
var diagramElement = this.getElement();
var width = 960, height = 500;
var force = d3.layout.force().size([ width, height ])
.charge(-400)
.linkDistance(40)
.on("tick", tick);
var drag = force.drag()
.on("dragstart", dragstart);
var svg = d3.select(diagramElement)
.append("svg")
.attr("width", width)
.attr("height", height);
var link = svg.selectAll(".link"),
node = svg.selectAll(".node");*/
/*interesting code*/
this.onStateChange = function() {
link.remove(); //delete old graph
node.remove(); //delete old graph
var string = this.getState().string;
graph = JSON.parse(string);
force.nodes(graph.nodes).links(graph.links).start();
link = link.data(graph.links)
.enter().append("line")
.attr("class", "link");
node = node.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 12)
.on("dblclick", dblclick)
.call(drag);
};
So whats wrong with this (indeed not very elegant) code, and how can I achieve that a single click will [1] remove the graph displayed and [2] render a new graph?
Thanks in advance...
I'm not sure if you have found a solution and I'm still a noob in d3 but I would like to suggest as this solution helped me. However, my force layout derived its data from a csv and not JSON not sure if it makes much difference.
I included " graph = { "nodes": [], "links": [] }; " in the "this.onStateChange = function() {" as this will help fill up the arrays with new data. Hope it helps!
I'm using Dart to develop a personal whiteboard Chrome app and it is sometimes useful to be able to quickly copy and paste an image (e.g. a slide from a presentation, a diagram or a handout) so that I can add notes over the image while teaching a class or giving a presentation.
How can I paste an image stored on the clipboard onto a canvas element in Dart?
Actually, this answer to the same question for JS is almost directly applicable. A Dart translation might look something like:
import 'dart:html';
void main() {
var can = new CanvasElement()
..width = 600
..height = 600
;
var con = can.getContext('2d');
document.onPaste.listen((e) {
var blob = e.clipboardData.items[0].getAsFile();
var reader = new FileReader();
reader.onLoad.listen((e) {
var img = new ImageElement()
..src = (e.target as FileReader).result;
img.onLoad.listen((_) {
con.drawImage(img, 0, 0);
});
});
reader.readAsDataUrl(blob);
});
document.body.children.add(can);
}