printJs库的使用心得 printJs配置 echart table超出

1.前言

        在我们需要在页面中打印某个区域的内容或者生成pdf的时候，我们可以直接用printJs库。

2.安装

npm install print-js -save

3.引入

        在想要引入的页面中添加如下代码

  import printJS from 'print-js';

4.使用

在我们想打印内容的标签上添加id，如下

...
...
...

之后在我们button上绑定事件函数，如下

 printJS({
      printable: 'printContent', //要打印内容的id
      type: 'html',
      targetStyles: ['*'], //将html内所有的style 带入到打印内容
    });

5.配置

参数	默认值	描述
printable	null	文档来源：pdf 或图像 url、html 元素 id 或 json 数据对象。
type	'pdf'	可打印类型。可用的打印选项有：pdf、html、图像、json 和 raw-html。
header	null	可打印类型。可用的打印选项有：pdf、html、图像、json 和 raw-html。
headerStyle	'font-weight: 300;'	要应用于页眉文本的可选页眉样式。
maxWidth	800	要应用于页眉文本的可选页眉样式。
css	null	这允许我们传递一个或多个 css 文件 URL，这些 URL 应该应用于正在打印的 html。Value 可以是具有单个 URL 的字符串，也可以是具有多个 URL 的数组。
style	null	这允许我们传递一个带有自定义样式的字符串，该字符串应应用于正在打印的 html。
scanStyles	true	设置为 false 时，库将不处理应用于正在打印的 html 的样式。使用参数时很有用。css
targetStyle	null	设置为 false 时，库将不处理应用于正在打印的 html 的样式。使用参数时很有用。css
targetStyles	null	但是，与“targetStyle”相同，这将处理任何一系列样式。例如：['border'， 'padding']，将包括 'border-bottom'， 'border-top'， 'border-left'， 'border-right'， 'padding-top' 等。 您还可以传递 ['*'] 来处理所有样式。
ignoreElements	[]	接受打印父 html 元素时应忽略的 html ID 数组。
properties	null	打印 JSON 时使用。这些是对象属性名称。
gridHeaderStyle	'font-weight: bold;'	打印 JSON 数据时网格标题的可选样式。
gridStyle	'border: 1px solid lightgray; margin-bottom: -1px;'	打印 JSON 数据时网格行的可选样式。
repeatTableHeader	true	在打印 JSON 数据时使用。设置为 时，数据表标题将仅显示在第一页中。false
showModal	null	启用此选项可在检索或处理大型 PDF 文件时显示用户反馈。
modalMessage	'Retrieving Document...'	设置为 时向用户显示的消息。showModaltrue
onLoadingStart	null	加载PDF时要执行的函数
onLoadingEnd	null	加载PDF后要执行的函数
documentTitle	'Document'	打印 html、image 或 json 时，这将显示为文档标题。
fallbackPrintable	null	打印 pdf 时，如果浏览器不兼容（查看浏览器兼容性表），库将在新选项卡中打开 pdf。这允许您传递要打开的不同 pdf 文档，而不是以“可打印”方式传递的原始文档。如果您在备用 pdf 文件中注入 javascript，这可能很有用。
onPdfOpen	null	打印 pdf 时，如果浏览器不兼容（查看浏览器兼容性表），库将在新选项卡中打开 pdf。可以在此处传递回调函数，当这种情况发生时将执行该函数。在您想要处理打印流程、更新用户界面等的某些情况下，它可能很有用。
onPrintDialogClose	null	关闭浏览器打印对话框后执行回调函数。
onError	error => throw error	发生错误时要执行的回调函数。
base64	false	打印作为 base64 数据传递的 PDF 文档时使用。
honorMarginPadding (deprecated )	true	这用于保留或删除正在打印的元素的填充和边距。有时，这些样式设置在屏幕上很棒，但在打印时看起来很糟糕。您可以通过将其设置为 false 来删除它。
honorColor (deprecated )	false	若要打印彩色文本，请将此属性设置为 true。默认情况下，所有文本都将以黑色打印。
font (deprecated )	'TimesNewRoman'	打印 HTML 或 JSON 时使用的字体。
font_size (deprecated )	'12pt'	打印 HTML 或 JSON 时使用的字体大小。
imageStyle (deprecated )	'width:100%;'	打印图像时使用。接受一个字符串，其中包含要应用于每个图像的自定义样式。

6.问题

6.1 我打印预览里的内容没有样式，或者和页面样式不一致？

        配置项添加如下代码

targetStyles: ['*'],

6.2 我想修改打印预览的纸张样式。

        配置项添加如下代码

 style: ` 
        @page{
          margin:0;
        }
        @media print{
          html,body{
            width:1920px;
            height:100%;
            margin:0;
          }
        }
      `,

6.3我想打印时，默认文件名可以自定义而不是网站名称？

    const oldTitle = document.title;
    const documentTitle: string = 123123123  //你自己设定的名称
    printJS({
      printable: 'printContent', //要打印内容的id
      type: 'html',
      targetStyles: ['*'],
      documentTitle: documentTitle,
      onLoadingStart: () => {
        document.title = documentTitle;
      },
      onPrintDialogClose: () => {
        clearInterval(focuser);
        document.title = oldTitle;
      },
    });

6.4 table 和echart显示不全？

        在table和echart中设置最大宽度，在printJs中设置style和maxWidth。

 style: ` 
        @page{
          margin:0;
        }
        html{
          zoom:92% //修改zoom达到缩放正确
        }
        @media print{
          html,body{
            width:1920px;
            height:100%;
            margin:0;
          }
        }
      `,
maxWidth: 1920,

6.5 我的table echart等元素被纸张分页？

        给所有不需要分页的元素添加css，如下

.cardItem {
    page-break-inside: avoid;
  }

6.6 我想让表格单独成一页？

        

.cardItem {
     page-break-before:always ;
    page-break-after: always;
  }