Import html2pdf using CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"/> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Once installed, html2pdf.js is ready to use. The following command will generate a PDF of #element-to-print and prompt the user to save the result:
var element = document.getElementById('element-to-print'); html2pdf(element); | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Below is a advance example using header and footer:
var date = new Date().toISOString().split("T")[0]; var opt = { margin: 0.5, filename: 'work-log-report-' + date + '.pdf', enableLinks: false, pagebreak: { mode: 'avoid-all' }, image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2 }, jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' } }; var element = document.getElementById('element-to-print'); html2pdf().from(element).set(opt).toPdf().get('pdf').then(function (pdf) { console.log("Done"); var totalPages = pdf.internal.getNumberOfPages(); for (var i = 1; i <= totalPages; i++) { pdf.setPage(i); pdf.setFontSize(10); pdf.setTextColor(150); pdf.text('Work Log Report - ' + date, (pdf.internal.pageSize.getWidth()/2) - 0.99, 0.35); pdf.text('Page ' + i + ' of ' + totalPages, (pdf.internal.pageSize.getWidth()/2) - 0.3, pdf.internal.pageSize.getHeight() - 0.25); } }).save(); | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Output would be as below:
 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Live Example
html2pdf.js converts any webpage or element into a printable PDF entirely client-side using html2canvas and jsPDF.
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Thursday, February 9, 2023
html2pdf.js | Client-side HTML-to-PDF rendering using pure JS JavaScript
Tuesday, February 7, 2023
Convert URLSearchParams to a JavaScript Object | JavaScript jQuery Get Parameters from URL | Get Params from URL using JavaScript
| Use the Object.fromEntries method and pass the URLSearchParams instance as an argument. This creates a JavaScript object from the parsed query parameters: |
const params = Object.fromEntries( new URLSearchParams(window.location.search) ) // URL: example.com/path?foo=bar&name=futurestudio&num=1 // { foo: 'bar', name: 'futurestudio', num: '1' } |
| Here’s how it works: the URLSearchParams class implements JavaScript’s iterator interface. The iterator interface contains the Iterator#entries method. This entries methods returns an iterator providing an array of [key, value] pairs: |
const params = new URLSearchParams('?foo=bar&name=futurestudio&num=1') const iterator = params.entries() iterator.next() // { done: false, value: ['foo', 'bar'] } iterator.next() // { done: false, value: ['name', 'futurestudio'] } iterator.next() // { done: false, value: ['num', '1] } iterator.next() // { done: true, value: undefined } |
How to Get URL Parameters with JavaScript
| URL parameters (also called query string parameters or URL variables) are used to send small amounts of data from page to page, or from client to server via a URL. They can contain all kinds of useful information, such as search queries, link referrals, product information, user preferences, and more. |
| In modern browsers, this has become a lot easier, thanks to the URLSearchParams interface. This defines a host of utility methods to work with the query string of a URL. |
Assuming that our URL is https://example.com/?product=shirt&color=blue&newuser&size=m, we can grab the query string using window.location.search:
const queryString = window.location.search; console.log(queryString); // ?product=shirt&color=blue&newuser&size=m |
We can then parse the query string’s parameters using URLSearchParams:
const urlParams = new URLSearchParams(queryString); |
|
Then we call any of its methods on the result. For example, URLSearchParams.get() will return the first value associated with the given search parameter: const product = urlParams.get('product') console.log(product); // shirt const color = urlParams.get('color') console.log(color); // blue const newUser = urlParams.get('newuser') console.log(newUser); // empty string |
Use the Object.fromEntries method and pass the URLSearchParams instance as an argument. This creates a JavaScript object from the parsed query parameters:
const params = Object.fromEntries( new URLSearchParams(window.location.search) ) // URL: example.com/path?foo=bar&name=futurestudio&num=1 // { foo: 'bar', name: 'futurestudio', num: '1' } |
|
Checking for the Presence of a Parameter You can use URLSearchParams.has() to check whether a certain parameter exists: console.log(urlParams.has('product')); // true console.log(urlParams.has('paymentmethod')); // false |
|
Getting All of a Parameter’s Values You can use URLSearchParams.getAll() to return all of the values associated with a particular parameter: console.log(urlParams.getAll('size')); // [ 'm' ] //Programmatically add a second size parameter. urlParams.append('size', 'xl'); console.log(urlParams.getAll('size')); // [ 'm', 'xl' ] |
|
Iterating over Parameters URLSearchParams also provides some familiar Object iterator methods, allowing you iterate over its keys, values and entries: const keys = urlParams.keys(), values = urlParams.values(), entries = urlParams.entries(); for (const key of keys) console.log(key); // product, color, newuser, size for (const value of values) console.log(value); // shirt, blue, , m for(const entry of entries) { console.log(`${entry[0]}: ${entry[1]}`); } // product: shirt // color: blue // newuser: // size: m |
Monday, February 6, 2023
Prevent scroll position of window when focus on LeafLet Map - Mouse wheel zoom on leaflet map only after click - Leaflet map scrolls top on focus on Browsers
| I have a leaflet map on an HTML page. When the map is focused the map jumps so that it's completely visible in the viewport. If the whole map doesn't fit, then the top of the map becomes aligned with the top of the viewport and the bottom just hangs off the end. |
| This is annoying, because then the whole page area jumped to top. |
| We need to add the listener immediately after the map initialized. So the whole thing becomes normal as we want like no scroll on focus. |
const map = L.map('leaflet-js-map').setView([latLng[0].Longitude, latLng[0].Latitude], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { minZoom: 10, maxZoom: 18, attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors' }).addTo(map); map.once('focus', function(e) { console.log(e); if (map.scrollWheelZoom.enabled()) { map.scrollWheelZoom.disable(); } else { map.scrollWheelZoom.enable(); } }); |
Monday, January 16, 2023
Few Tools That I Badly Need In My Daily Life
|
Wednesday, January 11, 2023
How to Use .gitconfig's includeIf - Git 2.13 conditional config on windows - git set username and email for separate project - Is it possible to have different Git configuration for different projects?
|
.gitconfig is usually stored in the user.home directory. I use a different identity to work on projects for Company A and something else for Company B (primarily the name / email). How can I have two different Git configurations so that my check-ins don't go with the name / email? |
| As of git version 2.13, git supports conditional configuration includes. In this example we clone Company A's repos in global directory anywhere in my computer, and Company B's repos in some other specific folder like D:/Mine/Projects. For company B, we will keep all our repo's inside D:/Mine/Projects |
File Location For Windows : "C:\Users\${USER_NAME}\.gitconfig", follow below steps to make it work:
|
Subscribe to:
Posts (Atom)