@chearasmey/print-html-element v1.0.0

Print HTML Element

Print your html element by css selector

Installation

npm i @chearasmey/print-html-element

Usage

Import print-html into vue 3 component

<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

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