Gathering detailed insights and metrics for pdf-creation-actions-web-component
Gathering detailed insights and metrics for pdf-creation-actions-web-component
Print or pdf generation buttons for printing Tignum reports
Installations
npm install pdf-creation-actions-web-componentDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Min. Node Version
>=14.3.0
Node Version
16.16.0
NPM Version
7.15.0
Releases
16
Languages
2
JavaScript
HTML
JavaScript (92.61%)
HTML (7.39%)
Developer
TIGNUM
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
3 Stars
190 Commits
2 Watchers
22 Branches
4 Contributors
Updated on Sep 13, 2022
Maintainers
1
Package Meta Information
Latest Version
1.20.7
Package Id
pdf-creation-actions-web-component@1.20.7
Unpacked Size
1.24 MB
Size
413.12 kB
File Count
7
NPM Version
7.15.0
Node Version
16.16.0
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
31
@babel/core@babel/plugin-proposal-class-properties@babel/plugin-proposal-decorators@babel/plugin-proposal-private-methods@babel/plugin-transform-runtime@babel/preset-env@open-wc/testing@semantic-release/changelog@semantic-release/commit-analyzer@semantic-release/git@semantic-release/npm@semantic-release/release-notes-generator@web/dev-server@web/test-runner@web/test-runner-mocha@web/test-runner-puppeteerbabel-clibabel-corebabel-eslintbabel-loaderbabel-preset-envdompurifyeslinteslint-plugin-sonarjshtml2pdf.jshttp-serverpdf-libpuppeteersemantic-releasewebpackwebpack-cli
PDF creation actions Web Component
Packages are released on the public npm registry.
Generate and download multi-page PDF from HTML passed as string to the Web Component.
Install the component
> npm i pdf-creation-actions-web-component
Import the component
import 'pdf-creation-actions-web-component';
Example (also look at the demo folder)
<print-to-pdf html="<div class="pages-wrapper"><div class="page-1"><style>p {color: red}</style}<p>first page to preview and print</p></div></div>" style="{root style as string}"></print-to-pdf>
Events
"download-pdf"
The web component listens to a 'download-pdf' event to generate the PDF from the HTML and start a download. You can pass on the attributes the name of the file and the quality of the generated pdf as options (1-4).
For example if you fire the event from a button like this:
<button id="print-pdf" onclick="downloadPdf('filename-requested')">Download Pdf</button>
That function should emit a custom event as follows:
function downloadPdf(filename = 'no-file-name-provided') {
const event = new CustomEvent("download-pdf", {
composed: true,
bubbles: true,
detail: {
fileName: filename,
quality: 2, // to define scale, by default is 4
orientation: 'landscape', //by default is 'portrait'
unit: 'cm', // by default is 'in'
format: 'A4', // by default is 'letter'
},
});
document.getElementById('pdfComponent').shadowRoot.dispatchEvent(event);
}
'progress'
The web component emits 'progress' events with messages indicating the current state of the pdf generation job.
window.addEventListener('progress', function(event) {
console.log(event.detail.message);
})
}
'How to use it:'
1- Add to the tag the event 'progress':
<print-to-pdf ... @progress="onProgress" />
2- In the function that you declare "onProgress" capture the event message and then use it as you need it:
function onProgress(event) {
const { detail: { message } } = event;
console.log(message);
}
Apply styles to the Web Component
This component has some styles that can be editable, and are defined in index.js in static styles. Example: By default the color and background are configured like:
:host {
color: var(--content-text-color, black);
background: var(--content-background-color, white);
}
The color and background can be modify by change this variables --content-text-color and ==content-background-color in print-to-pdf tag:
<style>
print-to-pdf {
--content-text-color: white;
--content-background-color: #0000ff;
}
</style>
It is also possible to add css classes:
<print-to-pdf class="my-blue-element" html="<p>Test 1</p>" fileName="pdf-generated-1"></print-to-pdf>
<print-to-pdf class="my-red-element" html="<p>Test 2</p>" fileName="pdf-generated-2"></print-to-pdf>
<style>
print-to-pdf.my-blue-element {
--content-text-color: black;
}
print-to-pdf.my-red-element {
--content-text-color: red;
}
}
</style>
Build
> npm run build
Run Tests
> npm run test
Demo on browser
> npm run demo:web
and open:
[http://127.0.0.1:8082/index.html](http://127.0.0.1:8082/index.html)
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 6/25 approved changesets -- score normalized to 2
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/pr-checks.yml:1
- Warn: no topLevel permission defined: .github/workflows/release-package.yml:1
- Info: no jobLevel write permissions found
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-checks.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/TIGNUM/pdf-generation-actions-web-component/pr-checks.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-checks.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/TIGNUM/pdf-generation-actions-web-component/pr-checks.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-package.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/TIGNUM/pdf-generation-actions-web-component/release-package.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release-package.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/TIGNUM/pdf-generation-actions-web-component/release-package.yml/main?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/pr-checks.yml:24
- Warn: npmCommand not pinned by hash: .github/workflows/release-package.yml:22
- Info: 0 out of 3 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
- Info: 0 out of 2 npmCommand dependencies pinned
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'main'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 12 are checked with a SAST tool
Reason
61 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-2h3h-q99f-3fhc
- Warn: Project is vulnerable to: GHSA-gmw6-94gg-2rc2
- Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
- Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
- Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-v2mw-5mch-w8c5
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-p3vf-v8qc-cwcr
- Warn: Project is vulnerable to: GHSA-gx9m-whjm-85jf
- Warn: Project is vulnerable to: GHSA-mmhx-hmjr-r674
- Warn: Project is vulnerable to: GHSA-vhxf-7vqr-mrjg
- Warn: Project is vulnerable to: GHSA-jc84-3g44-wf2q
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-w532-jxjh-hjhj
- Warn: Project is vulnerable to: GHSA-593f-38f6-jp5m
- Warn: Project is vulnerable to: GHSA-x2rg-q646-7m2v
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
- Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-hj9c-8jmm-8c52
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-x2pg-mjhr-2m5x
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx
- Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
2.7
/10
Last Scanned on 2025-07-14
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More