React｜操作特定元件或頁面 — 以列印及下載檔案為例。

使用 React createRef 及套件，列印下載特定元件/頁面。Download and Print React components.

本篇重點

• 使用 React 內建 createRef 進行使定元件的操作。
• 紀錄 react-to-pdf + react-to-print 的使用方式。

前言

• 安裝 react-to-pdf和 react-to-print
• 在 App.js 中貼上以下的程式碼
• yarn start
• 完成

直接上 code

import React, { createRef } from 'react'
import './App.css'
import Pdf from 'react-to-pdf'
import { useReactToPrint } from 'react-to-print'
const PrintAndDownload = () => {
    const ref = createRef()
const handlePrint = useReactToPrint({
        content: () => ref.current,
    })
return (
        <div className='app'>
            <Pdf targetRef={ref} filename='code-example.pdf'>
                {({ toPdf }) => <button onClick={toPdf}>Download Pdf</button>}
            </Pdf>
            <button onClick={handlePrint}> Print</button>
<div ref={ref}>
                <div className='detailContainer'>
                    <div className='title'>
                        <div className='center'>
                            <img
                                src='https://picsum.photos/id/10/120/60'
                                alt=''
                            />
                            <p>HELLO</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
function App() {
    return (
        <div className='App'>
            <PrintAndDownload />
        </div>
    )
}
export default App

GitHub - momolly1024/react-html2pdf