# @chearasmey/print-html-element

> Print your html element by css selector

Latest version **1.0.0** (published 2023-12-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install @chearasmey/print-html-element
pnpm add @chearasmey/print-html-element
yarn add @chearasmey/print-html-element
bun add @chearasmey/print-html-element
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-12-22 |
| First published | 2023-12-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | CHEA Rasmey |
| Maintainers | chearasmey |
| Keywords | print html with style, print inner html, print webpage |

## Links

- npm: https://www.npmjs.com/package/@chearasmey/print-html-element
- npm.io page: https://npm.io/package/@chearasmey/print-html-element

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2023-12-22

## README

# Print HTML Element

Print your html element by css selector

## Installation

```sh {"id":"01HJ5V6Q5SCQFBDHVY90CF57NX"}
npm i @chearasmey/print-html-element
```

## Usage

### Import print-html into vue 3 component

```js {"id":"01HJ5V6Q5SCQFBDHVY93FCFFEM"}
<template>
    <div id="print-data">
      <p class="text-crimson">
        Hello World
      </p>
      <p class="text-green">Green Text</p>
    </div>
    <button @click="printHTML('#print-data')">Print</button>
</template>
<script setup>
    import { printHTML } from '@chearasmey/print-html-element';
</script>

```
### Import print-html into React component
```js {"id":"01HJ5V6Q5SCQFBDHVY93FCFFEM"}
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import { printHTML } from '@chearasmey/print-html-element'  

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div id="print-data">
        <div>
          <a href="https://vitejs.dev" target="_blank">
            <img src={viteLogo} className="logo" alt="Vite logo" />
          </a>
          <a href="https://react.dev" target="_blank">
            <img src={reactLogo} className="logo react" alt="React logo" />
          </a>
        </div>
        <h1>Vite + React</h1>
        <div className="card">
          <button onClick={() => setCount((count) => count + 1)}>
            count is {count}
          </button>
          <p>
            Edit <code>src/App.tsx</code> and save to test HMR
          </p>
        </div>
        <p className="read-the-docs">
          Click on the Vite and React logos to learn more
        </p>
      </div>
      <button onClick={()=>printHTML('#print-data')}>Print</button>
      <button onClick={()=>printHTML('#root')}>Print Whole Page</button>
    </>
  )
}

export default App


```

---
_Source: https://npm.io/package/@chearasmey/print-html-element · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._