使用 print-js 实现打印功能

追光的栗子
3,690 阅读5分钟

下载

npm install print-js

引入

// 在使用的vue文件中引入
import print from "print-js";

使用

<div id="printJS-form" class="page-break">要打印的元素</div>


 // 自定义打印内容函数
 customPrintContent() {
   const content = document.createElement("div");
   content.innerHTML = `
     <div>自定义内容</div>
     ${document.getElementById("printJS-form").outerHTML} 
   `;
   return content;
},


//打印
printable() {=
  print({
    printable: this.customPrintContent(),  // 标签元素id
    type: "html",
    scanStyles: false,
    targetStyles: ["*"],
    header: `<div>自定义标题内容</div>`,
    headerStyle: "text-align: center;",
    style: `
         @page {margin:0 10mm},     // 打印时去掉眉页眉尾
        .el-table .el-table__body td,
        .el-table .el-table__header th,
        .el-table .el-table__footer td{ border: 1px solid #888888 !important;font-size: 14px} 
        .el-table .el-table__header th{height:45px;}
        .el-table .cell {text-align: center;}
        // 解决el-table边框显示不全
        @media print {
           .el-table .el-table__body td, .el-table .el-table__header th {
             border-color: #888888 !important;
           }
        }
        @media print { .page-break { page-break-before: always; } }   // 强制打印分页
        `,
  });
},

PrintJS参数配置表

参数默认值描述
printablenull文档来源：pdf 或图片 url、html 元素 id 或 json 数据对象。
type‘pdf’可打印类型。可用的打印选项有：pdf、html、image、json 和 raw-html。
headernull用于与 HTML、图像或 JSON 打印的可选标题。它将被放置在页面顶部。此属性将接受文本或原始 HTML。
headerStyle‘font-weight: 300;’要应用于标题文本的可选标题样式。
maxWidth800最大文档宽度（以像素为单位）。根据需要更改此设置。在打印 HTML、图像或 JSON 时使用。
cssnull应用于正在打印的 html 的 css 文件 URL。值可以是具有单个 URL 的字符串或具有多个 URL 的数组。
stylenull自定义样式的字符串。应用于正在打印的 html。
scanStylestrue设置为 false 时，库将不会处理应用于正在打印的 html 的样式。在使用 css 参数时很有用。
targetStylenull默认情况下，库仅在打印 HTML 元素时处理某些样式。此选项允许您传递要处理的样式数组。例如：[‘padding-top’, ‘border-bottom’]
targetStylesnull与 targetStyle 相同，但是，这将处理任意范围的样式。例如：[‘border’, ‘padding’]，将包括’border-bottom’、‘border-top’、‘border-left’、‘border-right’、‘padding-top’等。也可以通过 [’*'] 来处理所有样式。
ignoreElements[ ]传入打印父 html 元素时应忽略的 html id 数组。使其不打印。
propertiesnull打印 JSON 时使用。这些是对象属性名称。
gridHeaderStyle‘font-weight: bold;’打印 JSON 数据时网格标题的可选样式。
gridStyle‘border: 1px solid lightgray; margin-bottom: -1px;’打印 JSON 数据时网格行的可选样式。
repeatTableHeaderTRUE打印 JSON 数据时使用。设置为 false 时，数据表标题将仅显示在第一页。
showModalnull启用此选项可在检索或处理大型 PDF 文件时显示用户反馈。
modalMessageRetrieving Document…’当 showModal 设置为 true 时向用户显示的消息。
onLoadingStartnull加载 PDF 时要执行的功能
onLoadingEndnull加载 PDF 后要执行的功能
documentTitleDocument’打印 html、图像或 json 时，这将显示为文档标题。
fallbackPrintablenull打印 pdf 时，如果浏览器不兼容（检查浏览器兼容性表），库将在新选项卡中打开 pdf。这允许您传递要打开的不同pdf文档，而不是在printable中传递的原始文档。如果您在备用pdf文件中注入javascript，这可能很有用。
onPdfOpennull打印 pdf 时，如果浏览器不兼容（检查浏览器兼容性表），库将在新选项卡中打开 pdf。可以在此处传递回调函数，该函数将在发生这种情况时执行。在某些情况下，如果要处理打印流、更新用户界面等，它可能很有用。
onPrintDialogClosenull在浏览器打印对话框关闭后执行的回调函数。
onErrorerror => throw error发生错误时要执行的回调函数。
base64false在打印作为 base64 数据传递的 PDF 文档时使用。
honorMarginPadding (已弃用)true这用于保留或删除正在打印的元素中的填充和边距。有时这些样式设置在屏幕上很棒，但在打印时看起来很糟糕。您可以通过将其设置为 false 来将其删除。
honorColor (已弃用)false若要以彩色打印文本，请将此属性设置为 true。默认情况下，所有文本都将以黑色打印。
font(已弃用)TimesNewRoman’打印 HTML 或 JSON 时使用的字体。
font_size (已弃用)12pt’打印 HTML 或 JSON 时使用的字体大小。
imageStyle(已弃用)width:100%;’打印图像时使用。接受具有要应用于每个图像的自定义样式的字符串。

使用 CSS 强制打印分页符

使用 page-break-before 或 page-break-after 属性来插入分页符。这两个属性可以应用于需要分页的元素上，例如 <div>、<p>、<table> 等。可以设置的属性值有：

  • auto：自动决定是否插入分页符（默认值）。
  • always：始终插入分页符。
  • avoid：尽量避免插入分页符。
  • left：在元素之前插入分页符，并使下一页从左侧开始。
  • right：在元素之前插入分页符，并使下一页从右侧开始。
@media print { .page-break { page-break-before: always; } }

注意：在需要分页的元素上添加相应的类名，例如 .page-break，以便在打印时插入分页符。

其他打印属性

// 设置打印布局（横向、纵向、边距）
 @media print {
    @page {
      /* 纵向 */
      size: portrait; 
 
      /* 横向 */
      size: landscape;
 
      /* 边距 上右下左 */
      margin: 1cm 2cm 1cm 2cm;
    }
  }

// 去除浏览器默认页眉页脚
@media print {
  @page {
    margin: 0;
  }
  body {
    margin: 1cm;
  }
}

设置css样式

<style media=print>
@page {
    /* 纵向 */
    size: portrait;
    /* 横向 */
    /*size: landscape;*/
    /* 去除页眉页脚 */
    margin: 0;
}

/* 应用这个样式的，从那个标签结束开始另算一页，之后在遇到再起一页，以此类推 */
.page {
    page-break-after: always;
}
</style>
avatar
文章
阅读
粉丝