# html-print

**Repository Path**: wu_y/html-print

## Basic Information

- **Project Name**: html-print
- **Description**: html-print，纯前端打印插件，原生js调用浏览器原生能力，使用html字符串就可以定制一个打印样式，第一个版本主要是对于表格打印，因现存的几种表格打印组件都存在行合并跨页时出现了单元格坍缩问题，写这个插件主要是为了针对此问题；后续会不断完善其它功能
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2022-09-14
- **Last Updated**: 2022-09-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## browser-table-print

#### install

`npm i browser-table-print --save`

####  Attributes

|参数|说明|类型|可选值|默认值|
|--|--|--|--|--|
|options `必填`|init方法入参|Object|-|-|
|callback|回调|funciton|-|-|

#### options

|参数|说明|类型|可选值|默认值|
|--|--|--|--|--|
|header|页面的头部信息(每页都有打印, 高度按照内容自适应)；返回参数pages；调整间距时尽量使用padding，避免使用margin;|string \| function|-|-|
|body`必填`|页面的内容信息(除去header和footer的其余内容就是body)；bodyType为html时传入html字符串根元素必须是table，否则不进行处理；<br/>bodyType为body时可以传入string[]用于批量打印；|string\|string[](bodyType 为 html 时可用 string[])|-|-|
|bodyType|打印内容的方式，table以表格形式打印，内容过长自动分页；html以HTML形式打印一页内容，内容过长未做处理，|string|table\|html|-|
|footer|页面的尾部信息(每页都有打印, 高度按照内容自适应)；返回参数pages；|string \| function|-|-|
|htmlPrintCss|打印时应用的css文件路径(**运行时路径**，例如vue将`browser-table-print.css`放在`public`文件夹下,在`index.html`写入 `<link rel="stylesheet" href="browser-table-print.css" />`，这里 `htmlPrintCss` 填入href中的内容`browser-table-print.css`；html 中的 link 标签仅作为参考，`htmlPrintCss` 写完值以后删掉 html 的 link)|string|-|css文件路径|
|width|纸张宽度（需要带上单位）|string|-|210mm|
|height|纸张高度（需要带上单位）|string|-|296mm|
|padding|纸张内边距 (与css padding用法一致)|string|-|"0 10px"|
|style|自定义css字符串，扩展可直接传入例如 body { width: *px } 的css字符串方便快速开发调试；`header`部分为`header`标签；`footer`部分为`footer`标签；`body`部分为`main`标签；单个页面的根组件类名为 'page-container'；都可以在此属性中使用css选择器控制其样式以及内边距;|string|-|-|

#### callback arguments[0]

|方法|说明|入参|
|--|--|--|
|print|调起浏览器打印预览|-|
|getIframe|获取iframe标签|-|

#### 示例

```javascript
import { init } from "browser-table-print";

init(
  {
    header: "<h1 style='margin: 10px 0'>browser-table-print</h1>",
    body: document.getElementById("table").outerHTML,
    footer(pages) {
      return `<span>第${pages.pageNo}页/共${pages.total}页</span>`;
    },
    htmlPrintCss: "browser-table-print.css",
    style: "",
  },
  ({ print, getIframe }) => {
    document.getElementById("printButton").addEventListener("click", () => {
      print();
    });
  }
);

```