The world's most maintainable way to create paper-printable documents 🖨💘
You can print beautiful and maintainable paper documents by following steps:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/svg-paper@0.0.0/dist/svg-paper.min.css">
<script src="https://cdn.jsdelivr.net/npm/svg-paper@0.0.0/dist/svg-paper.min.js"></script>
$ npm install svg-paper
If you use Adobe XD, you are lucky because if you put some placeholders in the artboard like %placeholder1% or %serialPlaceholder[0]%, Adobe XD assigns id to <text> elements like _placeholder1_ or _serialPlaceholder_0_ automatically.
From this, you can embed the exported SVG into your HTML without any modification even if you use characters that cannot be used for id, and as a result, you can replace only placeholder as a value without replacing id 🙌
Figma doesn't do these things like Adobe XD. So if you use Figma, you have to replace id for example like as following.
$ sed -E 's/id="%([^%]+)%"/id="_\1_"/' /path/to/exported-from-figma.svg \
| sed -E 's/id="_(.+)\[(.+)\]_"/id="_\1_\2_"/' > /path/to/exported-from-figma.tweaked.svg
This command converts ids to safe format.
And one more thing. With Figma, not using multi-byte characters in your placeholder labels is strongly recommended.
If you use multi-byte characters, Figma converts them into XML character reference when exporting. This is very inconvenient to replace or specify as id.
Anyway, once SVG template is ready, rest is so easy 👍 You can replace or adjust contents easily with svg-paper like following.
import SvgPaper from 'svg-paper'
// or
// const SvgPaper = require('svg-paper')
const paper = new SvgPaper()
paper
// replace placeholder to actual value
.replace('%placeholder1%', 'Actual value 1')
// ... and more
// set max width to 1000
// in the other words, if actual width of the content is bigger than 1000 it shrinks automatically
.adjustText('#selector1', 1000)
// set max width to 800 and brings the element #_caseName to the center of 800 width area
.adjustText('#selector2', 800, 'middle')
// of course you can bring it to the end
.adjustText('#selector3', 800, 'end')
// automatically wrap or shrink actual content so that it fits within the specified area (600 x 300)
.adjustTetxarea('#selector4', 600, 300)
// you can pass some additional args
.adjustTextarea('#selector5',
600, // width
300, // height
1.2, // lineHeight : default is 1.2 times font-size
0.5, // paddingX : default is 0.5 times font-size
0.5, // paddingY : default is 0.5 times font-size
false // nowrap : default is false. if true, content will not be wrapped
)
// finally, apply all replacing and adjusting to DOM
.apply()
To beautify preview screen, you only have to add 3 lines to your html 👍
<head>
...
<link rel="stylesheet" href="svg-paper.min.css"> <!-- here -->
<style>@page { size: A4 }</style> <!-- here -->
</head>
<body class="A4"> <!-- here -->
<svg>...</svg>
</body>
First load svg-paper.min.css (or svg-paper.css). After that in <head> set @page size and set the class of <body> to specify page size.
Available page sizes are:
A3 A3 landscapeA4 A4 landscapeA5 A5 landscapeletter letter landscapelegal legal landscapePlease see test code to learn more 👌
You also can see the live demo on your local by following steps:
git clone this reponpm installnpm run test js/tests/functional.test.jsjs/tests/output/real-world-paper-xd.html or js/tests/output/real-world-paper-figma.html in your browsersvg-paper replaces placeholders and adjust text/textarea after DOM loaded, so the content before replaced and adjusted will be shown on the screen for a moment 🤔
This problem is very easy to solve just by adding some "blinder" layer on the content and hide it after .apply() 👍
<body>
<div id="blinder" style="width:100vw; height:100vh; background-color:#ccc"></div>
<svg>...</svg>
</body>
paper.apply()
document.querySelector('#blinder').style.display = 'none'
If your back-end isn't Node.js, you can use svg-paper by passing replacements and text/textarea adjustment parameters to front-end as JSON string.
// Controller
public function paper(YourModel $model, YourPaperDefinition $paper)
{
return $this->render('paper.html.twig', [
'svg' => $paper->getSvg(),
'replacements' => $paper->getReplacements($model),
'textAdjustments' => $paper->getTextAdjustments(),
'textAreaAdjustments' => $paper->getTextAreaAdjustments(),
]);
}
// YourPaperDefinition
class YourPaperDefinition
{
public function getSvg()
{
return file_get_contents('/path/to/paper.svg');
}
public function getReplacements(YourModel $model): array
{
return [
'%placeholder1%' => 'Actual value 1',
// ... and more
];
}
public function getTextAdjustments(): array
{
return [
// selector => [args for SvgPaper.adjustText()]
'#selector1' => [1000],
'#selector2' => [800, 'middle'],
'#selector3' => [800, 'end'],
];
}
public function getTextareaAdjustments(): array
{
// selector => [args for SvgPaper.adjustTextarea()]
return [
'#selector2' => [600, 300],
// ... and more
];
}
}
{# paper.html.twig #}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
<title>Paper</title>
<link rel="stylesheet" href="svg-paper.min.css">
<style>@page { size: A4 }</style>
</head>
<body class="A4">
{{ svg|raw }}
<div data-replacements="{{ replacements|json_encode }}"></div>
<div data-text-adjustments="{{ textAdjustments|json_encode }}"></div>
<div data-textarea-adjustments="{{ textAdjustments|json_encode }}"></div>
<script src="svg-paper.min.js"></script>
<script src="your-script.js"></script>
</body>
</html>
// your-script.js
const replacements = $('[data-replacements]').data('replacements')
const textAdjustments = $('[data-adjustments]').data('text-adjustments')
const textareaAdjustments = $('[data-adjustments]').data('textarea-adjustments')
const paper = new SvgPaper()
for (let [search, replacement] of Object.entries(replacements)) {
paper.replace(search, replacement)
}
for (let [selector, args] of Object.entries(textAdjustments)) {
paper.adjustText(selector, ...args)
}
for (let [selector, args] of Object.entries(textareaAdjustments)) {
paper.adjustTextarea(selector, ...args)
}
paper.apply()
You can easily print to PDF by using electron-pdf.
$ npm install --global electron-pdf
$ electron-pdf your-document.html your-document.pdf
FAQs
The world's most maintainable way to create paper-printable documents 🖨💘
The npm package svg-paper receives a total of 71 weekly downloads. As such, svg-paper popularity was classified as not popular.
We found that svg-paper demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.