The world's most maintainable way to create paper-printable documents 🖨💘
You can print beautiful and maintainable paper documents by following steps:
To learn more please see this doc 📝
You can get built assets from jsDelivr.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/svg-paper@x.x.x/dist/svg-paper.min.css">
<script src="https://cdn.jsdelivr.net/npm/svg-paper@x.x.x/dist/svg-paper.min.js"></script>
Of course you can install via npm.
$ npm install svg-paper
You can replace or adjust SVG contents in HTML 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 should add only 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>
Just load svg-paper.min.css (or svg-paper.css), 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 landscapeTo learn more about usage please see this doc or some test codes.
svg-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 disappear 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'
Even if your back-end isn't Node.js, of course you can use svg-paper 👍
The most easy ways is just 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>
<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 directly by using electron-pdf.
$ npm install --global electron-pdf
$ electron-pdf your-document.html your-document.pdf
Enjoy! ✨
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.