# pdf-html

> export dom to pdf

Latest version **1.0.5** (published 2020-02-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install pdf-html
pnpm add pdf-html
yarn add pdf-html
bun add pdf-html
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2020-02-25 |
| First published | 2020-02-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 24.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | niannings |
| Maintainers | wlxm |
| Keywords | pdf, html2pdf, dom2pdf, pdf-export, print |

## Links

- npm: https://www.npmjs.com/package/pdf-html
- Repository: https://github.com/niannings/pdf-html
- Homepage: https://github.com/niannings/pdf-html#readme
- Issues: https://github.com/niannings/pdf-html/issues
- npm.io page: https://npm.io/package/pdf-html

## Alternatives

- [@cantoo/pdf-lib](https://npm.io/package/@cantoo/pdf-lib.md) — 297.9K weekly downloads
- [datatables.net-buttons](https://npm.io/package/datatables.net-buttons.md) — 200.1K weekly downloads
- [@ckeditor/ckeditor5-export-pdf](https://npm.io/package/@ckeditor/ckeditor5-export-pdf.md) — 167.0K weekly downloads
- [scanbot-web-sdk](https://npm.io/package/scanbot-web-sdk.md) — 15.0K weekly downloads
- [@syncfusion/ej2-angular-pdfviewer](https://npm.io/package/@syncfusion/ej2-angular-pdfviewer.md) — 8.8K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2020-02-25
- 1.0.4 — 2020-02-25
- 1.0.3 — 2020-02-23
- 1.0.2 — 2020-02-23
- 1.0.1 — 2020-02-23
- 1.0.0 — 2020-02-23

## README

# pdf-html

将任意单个或多个dom元素导出为pdf

## install

```shell
npm i -S pdf-html
```

## usage

### 导出单个元素

```js
import pdfHtml from 'pdf-html';

pdfHtml({
    el: document.body
});
// 使用选择器，（匹配到该选择器的元素都将出现在pdf中）
pdfHtml({
    el: 'body'
});
```

### 导出多个元素

```js
pdfHtml({
    el: [document.querySelector('.class-1'), document.querySelector('.class-2')]
});
pdfHtml({
    el: [document.querySelectorAll('div')]
});
// 使用选择器
pdfHtml({
    el: ['.class-1', '.class-2', 'pre', 'img', 'canvas']
});
```

## Options

### 页面尺寸 size

默认：A4 portrait  
详情可查看：[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size)

```js
pdfHtml({
    el: 'body',
    styles: {
        size: 'A4 landspace'
    }
});
```

### 页面边距

默认：2cm

```js
pdfHtml({
    el: 'body',
    styles: {
        margin: '2cm 1cm 1cm'
    }
});
```

## 搭配框架使用

### React

#### 基本使用

```jsx
import reactPdfHtml from 'pdf-html/dist/react-pdf-html.js';

const div = document.createElement('div');

document.body.append(div);

reactPdfHtml({
    el: div,
    component: (
        <div>
            <MyComponent />
        </div>
    )
});
```

#### 组件内有异步更新

等待组件完成更新再来导出

```jsx
import reactPdfHtml from 'pdf-html/dist/react-pdf-html.js';

const div = document.createElement('div');

document.body.append(div);

let start;
const waitUpdate = isOk => {
    if (isOk) {
        setTimeout(() => start(isOk));
    }
}

start = reactPdfHtml({
    el: div,
    component: (
        <div>
            <MyComponent onFetched={waitUpdate} />
        </div>
    ),
    async: true
});
```

MyComponent.js

```jsx
function MyComponent({ onFetched }) {
    const [message, setMessage] = useState('no message');
    const getData = () => {
        setTimeout(() => {
            setMessage('hello pdf-html');
            onFetched && onFetched(true);
        }, 2000);
    }

    useEffect(() => {
        getData();
    }, []);

    return <div>{message}</div>
}
```

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