前端printjs的使用实战案例_Javascript

一、下载

1.使用 npm 进行安装

 npm install print-js --save

2.使用 yarn 安装

yarn add print-js

3.导入

import print from 'print-js'

二、案例

1、打印html

<button @click="printer">打印</button>

<div id="printcontent">
    <!-- 需要打印的内容 -->
    123
</div>

<script>
import printjs from 'print-js';

const printer = () =>{
    printjs({
        printable: '#printcontent',
        type: 'html',
    });
}
</script>

2.打印json

<button @click="printer">打印</button>

<script>
import printjs from 'print-js';

const printer = () =>{
    printjs({
        printable:[
            { date:"2008-08-08", name:"赛丽亚", intensify:"429" },
            { date:"2012-12-12", name:"派蒙", intensify:"648" },
        ], 
        properties: [ //表头
            {field: 'date', displayname: '日期', },
            {field: 'name', displayname: '姓名', },
            {field: 'intensify', displayname: '变强', },
        ], 
        type: 'json',
        header:"人员名单",
        headerstyle:"text-align: center;font-weight: bold;",
        documenttitle:"",
        gridheaderstyle: 'border: 1px solid #000;text-align:center',
        gridstyle: 'border: 1px solid #000;text-align:center',
        repeattableheader:true
    })
}
</script>

3.打印图片

<button @click="printer">打印</button>

<script>
import printjs from 'print-js';

const printer = () =>{
    printjs({
        printable: [
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', 
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', 
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'    
        ],
        type: 'image',
        header: 'multiple images',
        imagestyle: 'width:50%;margin-bottom:20px;'
    })
}
</script>

三、配置项

属性	默认值	描述
printable	null	文档来源：pdf 或图像 url、html 元素 id 或 json 数据对象。
type	'pdf'	可打印类型。可用的打印选项包括：pdf、html、image、json 和 raw-html。
header	null	用于 html、图像或 json 打印的可选标题。它将放置在页面顶部。此属性将接受文本或原始 html。
headerstyle	'font-weight: 300;'	要应用于页眉文本的可选页眉样式。
maxwidth	800	最大文档宽度（以像素为单位）。根据需要更改此设置。打印 html、图像或 json 时使用。
css	null	这允许我们传递一个或多个 css 文件 url，这些 url 应该应用于正在打印的 html。值可以是具有单个 url 的字符串，也可以是具有多个 url 的数组。
style	null	这允许我们传递一个具有自定义样式的字符串，该字符串应应用于正在打印的 html。
scanstyles	true	设置为 false 时，库将不处理应用于正在打印的 html 的样式。使用参数时很有用。
targetstyle	null	默认情况下，库在打印 html 元素时仅处理某些样式。此选项允许您传递要处理的样式数组。例如： ['padding-top'， 'border-bottom']
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 数据时使用。设置为时，数据表标题将仅显示在第一页中。
showmodal	null	启用此选项可在检索或处理大型 pdf 文件时显示用户反馈。
modalmessage	'retrieving document...'	设置为时向用户显示的消息。
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 （已弃用）	true	这用于保留或删除正在打印的元素的填充和边距。有时这些样式设置在屏幕上很棒，但在打印时看起来很糟糕。您可以通过将其设置为 false 来删除它。
honorcolor （已弃用）	false	若要打印彩色文本，请将此属性设置为 true。默认情况下，所有文本都将以黑色打印。
font （已弃用）	'timesnewroman'	打印 html 或 json 时使用的字体。
font_size （已弃用）	'12pt'	打印 html 或 json 时使用的字体大小。
imagestyle （已弃用）	'width:100%;'	打印图像时使用。接受要应用于每个图像的具有自定义样式的字符串。

附：使用print-js开发打印功能，解决不同分辨率设备打印时适配的问题

近期开发了一张报表，功能有打印，是好开发的；可是不同设备分辨率打印时并不适配。

网上查找搜寻未果，经过经理的提点和自己的探索和尝试，最终解决了这一令人头疼的问题。

特此记录，并把这个方法和思维分享给遇到这个问题查找无果的爱学习爱鼓捣辛勤工作的读者们。

问题描述：

笔者在开发时按照本pc机的分辨率进行打印调整；所以在当前电脑上打印是没有任何问题的。

只是换了一台设备后，分辨率不同了，打印样式会被破坏；

在开发环境中引入 print-js 的博文很多，且都很不错，在此就不再赘述了。直接上代码！

需要打印的表体部分如下；注意这里为打印定义了一个id="printtable"；适配时用到id="rootdiv"；

<div id="rootdiv">
    <el-button type="primary" @click="handleprint">打印表格</el-button>
    <el-table :data="tabdata" border :cell-style="{'text-align':'center'}"
                  :header-cell-style="{'text-align':'center'}" 
                  :row-style="{ height: '84px' }"
                  id="printtable"
        >
          <el-table-column label="编号" prop="ordnum1" width="80"/>
          <el-table-column label="会计科目" prop="ledgeracc1" width=""/>
          <el-table-column label="年初数" prop="beginbalance1" width=""/>
          <el-table-column label="期末数" prop="closebalance1" width=""/>
          <el-table-column label="编号" prop="ordnum2" width="80"/>
          <el-table-column label="会计科目" prop="ledgeracc2" width=""/>
          <el-table-column label="年初数" prop="beginbalance2" width=""/>
          <el-table-column label="期末数" prop="closebalance2" width=""/>
    </el-table>
</div>

定义打印顶部模板，打印样式，打印功能；

打印时的样式，如果分辨率和笔者不同，

可以设置打印时 css 样式的缩放 zoom，边距 margin；

或者 printjs 函数中参数的对象属性 font_size 等来调整；

还可以在el-table-column标签中通过调整width大小表体列宽来适配；

请读者仔细耐心浏览阅读handleprint()函数；笔者在里面做了详细的注释和解释，并进行了排版；

data(){
    return{
        // 打印时的样式，如果分辨率和笔者不同，可以设置打印时的缩放，边距，字体大小等来调整；
        // 还可以通过调整表体列宽来适配；
        printstyle: `
          @page {
              /* size:auto; */
              margin-top:90px;
              margin-left:20px; /* 设置打印页面的左边距 */
              margin-right:20px;
          }
            thead th {
              border-top: 1px solid #000;
              border-right: 1px solid #000;
              border-left: 1px solid #000;
            }
            tbody td {
              /* height: 32px;
              line-height: 36px; */
              border: 1px solid #000;
            }
            body {
              zoom: 50%; /* 设置打印时的缩放 */
            }
            tbody {
              border: 1px solid #ff0000;
              // border: solid 1px red;
              /* color: green;  *//*设置字体颜色*/
              height: 36px;
              line-height: 26px;
              text-align: center;
              vertical-align: middle;
              // font_size: 100pt;
              /* font-family:'宋体'; */
              /* color: green; */
              // font_size: 28pt;
            }
            table {
              // color: red;
              // line-height: 36px;
              border-collapse: collapse;
            }
            `,
        // 打印时的顶部模板;
        tophtml: `
            <h2 style="text-align: center;width:227%;">食堂-资产负债表</h2>
            <div style="text-align:center;margin: 10px auto;font-size:80%;
                    width:227%;display: flex;flex-direction:row-reverse;">
              <div style="margin-right: 20px;margin-left: 10px;">金额单位:元</div>
              <div style="margin-right: 20px;">日期:2023-11</div>
              <div style="margin-right: 20px;">单位名称:xxxx幼儿园</div>
            </div>
            `,
        // 表格数据;
        tabledata: [
                {
                 beginbalance1 : 'xxx58.32',
                 beginbalance2 : 'xxx242',
                 closebalance1 : 'xxx655.63',
                 closebalance2 : 'xxx30',
                 ledgeracc1 : '一.资产类小计',
                 ledgeracc2 : '二.负债类小计',
                 ordnum1 : '-',
                 ordnum2 : '-'
                },
                {
                 beginbalance1 : 'xx716.24',
                 beginbalance2 : 'x80',
                 closebalance1 : 'xx786.59',
                 closebalance2 : 'x80',
                 ledgeracc1 : '银行存款',
                 ledgeracc2 : '应付账款',
                 ordnum1 : '1',
                 ordnum2 : '8',
                }
       ]
    }
},
methods: {
    handleprint() {
      let rootdiv = document.getelementbyid('rootdiv')
      // 适配打印时的分辨率, 请读者根据自己的pc,在此设置不同的分辨率
      rootdiv.style.height = '1200px'
      rootdiv.style.width = '1920px'
      /*
        这里做的比较巧妙和不容易想到的是，在打印之前将所有的设备分辨率改变为开发者电脑的分辨率，
        打印完成之后，又恢复为用户默认的分辨率；这样就不用一一去考虑机型了；
      */
      // 定义了分辨率，当前缩放与布局就不需要设置和调整了;
      let useragent = navigator.useragent
      //判断是否chrome浏览器
      if (useragent.indexof('chrome') > -1) {
        console.log('chrome')
        /*
           这里使用了settimeout,读者一定要注意给打印设置时间；
           当前笔者设置了50毫秒的延时时间; 将打印放入了延时队列，不然printjs立即执行打印;
           而页面分辨率还未适配成功，导致打印样式适配失败;
           这样做给当前的页面适配分辨率渲染预留了足够的时间;
        */
        settimeout(() => {
          printjs({
            printable: 'printtable', // 标签元素id,表体;
            // maxwidth: 1150, // 最大宽度
            font_size: '26pt', // 设置打印时字体大小
            type: 'html',
            header: this.tophtml, // 打印顶部模板
            documenttitle: '',
            style: this.printstyle // 打印样式
          })
          // 打印完之后 恢复默认分辨率
          // rootdiv.style.height = window.screen.height + 'px'
          // rootdiv.style.width = window.screen.width + 'px'
          // 使用相对单位，这样不会出现滚动条;
          rootdiv.style.height = 'auto'
          rootdiv.style.width = '100%'
        }, 50) 
      }
    },
}

如下图，改变本机分辨率之后的打印显示；