dom-node-export
This npm package allows you to export individual nodes from your web application or website into a separate XHTML document in the form in which you see them on your page.
Features
- Saves element with final computed styles (as a "snapshot") or injects styles taken from the source document as they were declared, allowing the exported element to be more "flexible".
- Has the ability to embed the fonts of the original document. Markup, styles, fonts, images - all in one document.
- Allows you to customize the styles of the document, body and exported element in the final document.
- Easy customization of document title and favicon.
- Allows you to filter the items that will be exported.
- ES6 types and importing.
Given the above, it may be used to save part of a page as a document for later distribution.
Example
Package installation:
npm install dom-node-exportIncluding in your code (Typescript):
import { exportNode } from 'dom-node-export';Using (Typescript):
const faviconUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAHdSURBVDiNhZPNbtNAFIW/scdJHLeO3R81CYkUIQUItIJUqtRngHWREAKJHY8Ba16AFazYdFveARb8CIESQIiyMJDQ1qUlDVixPSwiK3GbtEcajeZe3XPPmbkjXntqvWTzJCtpcAaUoL3v0azXRZDEJDGFKGYGYDAY0Ol0U0VGxqC4tARAHNE4zPECWE3yGgACOa2rQByTwez4UQKoeEhkGAbVauUsJylIAE0gOt0uX7e3UWqULJWKnK/Vho0VfPz8CWvh4kkCQGi6zqxtp5JH/T7vWy0AypULBN4H7LybO2kBNMcukM1kpkqNpaThdrDCTXeSAs3f9/G+/5hKUL+0TGgInPCdpd7er4nm42+QvMJon4hq5Ry2adC3rvFvkIkg3Egp0EAsLiziOM5EAiGGi/k1/C9bqmwHt4BH4xbEzu7OqRauriwzkzPYC4uizG5Tvbl3Waw+bSWDdKqFBLkMdDPr/TAIfiP0mykFc66LaZpTi6VhEMcQOWte0O315Hz2NvBADgWg9XpH7Pn+VALLzIMmcSxNi8KwpeL4bvBqY0VqMX/8Pr0IJ2fOjS4xUjA2lHgHECuFoQtdwcPDXz/bhezftgB49jK8Hmk8Vxz/OWnoggM3L7ZuXNHvJLH/OsuW2UnvU0cAAAAASUVORK5CYII='
function downloadFile(dataUrl: string, title: string) {
const anchor = document.createElement('a');
anchor.href = dataUrl;
anchor.download = title;
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
}
async function saveToFile(element: HtmlElement) {
const dataUrl = await exportNode(node, {
docFaviconUrl: faviconUrl,
docTitle: 'Exported element',
styles: {
body: {
padding: '2rem'
}
},
filter: node => !node.classList?.contains('hidden'),
});
if (dataUrl != null) {
this.downloadFile(dataUrl, 'Document')
}
}
async function main() {
const elements = document.getElementsByClassName('doc')
if (elements.length > 0) {
await saveToFile(elements[0])
}
}