I developed a script to export a canvas to HTML. Then you can open the HTML file in your browser and print to PDF. Any external links in your canvas will be clickable in the PDF.
First, open your canvas in Obsidian and zoom/pan to whatever view you want to export. Then open Developer Tools and run this script:
// Get a copy of the canvas content element
let view = app.workspace.activeLeaf.view;
if (view.getViewType() !== "canvas") {
throw new Error("The active view is not a canvas");
}
let content = view.contentEl.cloneNode(true);
// Remove the canvas background dots
content.querySelector(".canvas-background").remove();
// Remove the canvas UI controls
content.querySelector(".canvas-card-menu").remove();
content.querySelector(".canvas-controls").remove();
// Remove the canvas node labels (image filenames)
content.querySelectorAll(".canvas-node-label").forEach((el) => el.remove());
// Get all the CSS, except for print styles
// https://developer.mozilla.org/en-US/docs/Web/API/StyleSheetList#get_all_css_rules_for_the_document_using_array_methods
let allCSS = [...document.styleSheets]
.map((styleSheet) =>
[...styleSheet.cssRules]
.map((rule) => rule.cssText)
.filter((cssText) => !cssText.includes("@media print")) // No print styles
.join("\n")
)
.join("\n");
// Global regex matches app:// followed by any characters except /
let pattern = /app:\/\/[^\/]*/g;
// Generate HTML & CSS. Remove any app:// prefixes from URLs.
let html = `
<!DOCTYPE HTML>
<html>
<head>
<style>
${allCSS}
/* Use exact colors for card backgrounds and bullets */
body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
</style>
</head>
<body class="${document.querySelector("body").className}">
${content.outerHTML}
</body>
</html>`.replaceAll(pattern, "");
// Save html file
let filename = "canvas-export.html";
existingFile = app.vault.getAbstractFileByPath(filename);
if (existingFile) {
app.vault.delete(existingFile);
}
app.vault.create(filename, html);
console.log("Open this file in your browser and print to PDF:");
console.log(`${app.vault.adapter.basePath}/${filename}`);
Thanks for your sharing.
May I ask how to use these scripts in the developer tool in Obsidian? I can see 4 menu items including Elements, Console, Source and Network, but don’t know how to use the scripts.
Try resizing the canvas before running the script (I shrank until everything was visible on one screen), that did the trick for me after running into said error on a Mac.
On this topic, I know I’m still waiting for a native option to become available as well but one idea that I should be considered for this is to base it off Excalidraw’s Slide Script. This was really effective for quickly turning the [excalidraw] canvas to a presentation, it seems like it could also be used to then print out an export.
One addition I would make is the ability to have a set frame that sets the aspect ratio appropriately… perhaps even printing by card order. For example, here is a high-level view of a presentation I recently gave using block note and I would like to print it out with an infinite vertical scroll by essentially identifying the order of blocks.
Thanks for the real useful script !! Do any one of you might know how to export the canvas by keeping links to the notes ? (i created my canvas by linking notes together, and i’d like to open the .md file when clicking on the nodes of the exported canvas.html)
thank you! Any chance to get this as a obsidian plugin, with some auto export functionality?