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

最新推荐文章于 2024-04-17 15:08:53 发布

Johna_114514

最新推荐文章于 2024-04-17 15:08:53 发布

阅读量698

点赞数 1

文章标签： javascript html vue

本文链接：https://blog.csdn.net/m0_63007736/article/details/134268235

版权

1.前言

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

2.安装

npm install print-js -save

3.引入

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

  import printJS from 'print-js';

4.使用

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

<div id="printContent">
...
...
...
</div>

之后在我们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;
  }