@qidiancn/browser-table-print
v0.0.10
Published
一款基于js的纯前端打印插件,完全可以使用前端开发人员更加熟悉的html字符串进行布局排版
Downloads
6
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,否则不进行处理;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标签|-|
示例
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();
});
}
);