@qidiancn/browser-table-print

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();
    });
  }
);