{"id":16648851,"url":"https://github.com/szepeshazi/print-elements","last_synced_at":"2025-04-09T16:51:19.639Z","repository":{"id":46677571,"uuid":"169057863","full_name":"szepeshazi/print-elements","owner":"szepeshazi","description":"Print selected elements of an HTML page","archived":false,"fork":false,"pushed_at":"2021-09-30T16:16:04.000Z","size":470,"stargazers_count":26,"open_issues_count":3,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-23T18:54:20.467Z","etag":null,"topics":["javascript","printing"],"latest_commit_sha":null,"homepage":"https://szepeshazi.github.io/print-elements/example/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/szepeshazi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-04T09:55:41.000Z","updated_at":"2025-02-14T19:48:56.000Z","dependencies_parsed_at":"2022-09-03T22:51:27.505Z","dependency_job_id":null,"html_url":"https://github.com/szepeshazi/print-elements","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/szepeshazi%2Fprint-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/szepeshazi%2Fprint-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/szepeshazi%2Fprint-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/szepeshazi%2Fprint-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/szepeshazi","download_url":"https://codeload.github.com/szepeshazi/print-elements/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248072894,"owners_count":21043327,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","printing"],"created_at":"2024-10-12T09:05:36.795Z","updated_at":"2025-04-09T16:51:19.611Z","avatar_url":"https://github.com/szepeshazi.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Print selected webpage elements \n\nThis tiny Javascript module allows printing selected HTML Element nodes from a web page.\n\n### Usage\n\n1. Include the `print_elements.js` script on your page.\n2. Include the supplementary `print.css` print stylesheet on your page.\n2. Invoke the `PrintElements.print([element1, element2, ...])` function with a list of HTML elements to print the selected elements.\n\nSee it in action here: [Print elements example](https://szepeshazi.github.io/print-elements/example/). Press on the top toolbar buttons to print different parts of the document.\n\nCheck the `example` directory for the source code of the above example.\n\n### How does it work\n\nThe script traverses the DOM from each of the given elements up to the `BODY` element. All selected nodes and their ancestors \nwill be marked with a class to keep them in the print view. All siblings of selected nodes, and\nsiblings of their ancestors will be marked with a class to hide from print view. \nA print-only css will take care of actually hiding and showing the respective elements.\n\nFor a more detailed story of the why and how behind this library, read my [Medium article](https://medium.com/@aszepeshazi/printing-selected-elements-on-a-web-page-from-javascript-a878ac873828) on the subject.\n\n### Motivation\n\nThere are several approaches out there for the problem of how to print a part of an HTML page. \n\n#### Popular solution no 1. - Media specific styles or stylesheets\n\nThis approach requires that you build your whole site print-aware, telling in advance how your pages render when printing. \nIt is a very clean solution and requires no JavaScript.\nHowever, you'll have to statically assign classes and css definitions for printable and non-printable sections of your HTML code.\nThis does not help if you have to decide what to print dynamically.\n\n#### Popular solution no 2. - Create a new document with the selected element's content\n\nThis usually goes like grabbing the inner HTML of the given node, insert it into a new document, and print it. \nSome variations suggest to save the current body content, replace it with the given node's content, then print, then revert the body content to the original.\nEither way, it is messy - preserving styles can be tricky, will detach event handlers if replacing the current body content, and so on. \n\n\nI felt all of the existing approaches have some trade-offs, so I tried to find a general, dynamic solution without side-effects.\n\n## Benefits of this library\n\n* No need to statically declare what is printable and what is not - just invoke the print function with any nodes, any time.\n* No need to move around DOM nodes\n* No new window or tab when printing\n* Preserves all styles for the selected elements\n* Keeps all event bindings, style definitions - it doesn't do anything invasive with your document.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fszepeshazi%2Fprint-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fszepeshazi%2Fprint-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fszepeshazi%2Fprint-elements/lists"}