After converting the specific <div> tag to <canvas> using html2canvas, I am looking to integrate this converted canvas image with other elements in JsPdf such as Autotables and texts.
Appreciate any guidance or suggestions. Thank you.
After converting the specific <div> tag to <canvas> using html2canvas, I am looking to integrate this converted canvas image with other elements in JsPdf such as Autotables and texts.
Appreciate any guidance or suggestions. Thank you.
Check out my solution on jsfiddle at http://jsfiddle.net/huynhsamha/q5w8pvdn/
You can easily run this code snippet on jsfiddle, it's fully functional.
const html2canvas = window.html2canvas;
$(document).ready(function() {
$('#download').click(function() {
html2canvas(document.body).then(function(canvas) {
var imgData = canvas.toDataURL('image/png');
var doc = new jsPDF();
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('file.pdf');
});
});
});button {
margin: 50px;
}<p>The library has two sets of tests. The first set is a number of qunit tests that check that different values parsed by browsers are correctly converted in html2canvas. To run these tests with grunt you'll need phantomjs.</p>
<p>The other set of tests run Firefox, Chrome and Internet Explorer with webdriver. The selenium standalone server (runs on Java) is required for these tests and can be downloaded from here. They capture an actual screenshot from the test pages and compare the image to the screenshot created by html2canvas and calculate the percentage differences. These tests generally aren't expected to provide 100% matches, but while committing changes, these should generally not go decrease from the baseline values.</p>
<button id="download">Download PDF</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="026a766f6e3061636c74637142332c322c322f636e726a632c3330">[email protected]</a>/dist/html2canvas.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5bfa6a5b1b395e4fbe1fbe4">[email protected]</a>/dist/jspdf.min.js"></script>Here is the AJAX code snippet: $.ajax({ url: '<?php echo base_url(); ?>deleteRowUsingApiKey/index', //This is the current doc type: "POST", //dataType:'json', // add json datatype to get json data: {name ...
Apologies if this question has been asked before. I've noticed in some people's code that they use the following syntax: <div ui-grid="myUIGrid" ui-grid-selection ui-grid-resize-columns class="grid" /> Can someone explain what ui-grid-sel ...
I'm encountering a problem with an error message stating "Expected identifier" in this code snippet. Any thoughts on what might be causing this issue? It seems like the problematic section of the code is originating from the transpiled version of th ...
I am in the process of creating a user interface for an application where users can add unordered lists and list items by clicking on "add question". I have successfully designed the front end part and here is a preview: However, I am facing difficulties ...
I have developed a tool for developers that allows them to retrieve device data from a database for a specific time period, generate plots using matplotlib, save the plots locally, and display them on a webpage. The frontend is built using create-react-app ...
I am facing an issue that I can't quite understand: "Error: Can't set headers after they are sent." This is a basic API created with express.js to verify if a user is logged in or not. If the user is not logged in, they should be red ...
Currently, I am developing a Single Page Application that utilizes Angular 8 on the frontend and Laravel on the backend. The application involves performing CRUD operations, and specifically when dealing with editing functionality, I encounter an issue. Th ...
I am currently working on creating a basic webpage layout consisting of a header, menu, and content div. My goal is to have the content div populate with the corresponding page when a user clicks on a link in the menu. Currently, I just want this common la ...
The setup consists of an AspNetCore WebApi using default configuration for Windows authentication and CORS enabled. The client side utilizes Angular with both GET and POST methods implemented. Successfully executing the GET call: this.http.get("https://l ...
Is there a way to keep the table header fixed while allowing the table body to scroll in an HTML table? Any advice on how to achieve this would be greatly appreciated. Thanks in advance! ...
Imagine I have the following piece of Typescript code: const a = 456 const b = () => a Is there a way to make the Typescript compiler detect and flag an error or warning during compilation indicating that function b is accessing an external variable a ...
When it comes to loading a CSV into Highcharts with Angular, my usual approach is as follows: export class OutputGraphComponent implements OnInit { public options: any = { chart: { type: 'column' }, data: { csvURL: path.to ...
Currently, I am involved in a project that involves an A.I pushing text onto a MySQL database. Our goal is to display the ongoing writing process on a webpage. We are still actively working on this. We are retrieving the data and regularly checking the da ...
Utilizing custom properties permits seamless data binding between multiple components. <section id="main"> <app-home [dict]="dict">Hello there!</app-home> </section> In this scenario, dict serves ...
Here is my question: The project's base URL is : The test page URL is :, and on this page, I have included a JavaScript file called datatable.packer.js using the following code: <script type="text/javascript" th:src="@{/resources/js/datatable ...
I'm currently working with a parent and child component setup. Within the child component, I have a button configured like this: //child.component.html <button mat-raised-button [disabled]="!form.valid || submitButtonDisable" type = 'Submi ...
My HTML structure is as follows: <div> <ul> <li> <div>Other elements</div> <div> <ul> <li class='base-parent parent'> <div>Base Parent ...
I am interested in transforming links into AJAX versions whenever possible. To achieve this, I plan to implement a function called replaceLinks that will add an onClick handler to each link on the page and trigger ajaxPageWSM(href). This is what I currentl ...
Currently, I am in the process of developing a game using a combination of HTML, CSS, and JavaScript. I'm exploring the integration of template engines and AJAX into the project. In order to achieve this, I have set up a server that, when executed in ...
Within my save function, I have the following: $scope.saveData = function () { if (confirm("Are you sure you want to save") === false) { return } // do saving When using the above code and clicking "yes," I encounter an error. Interestin ...