zoukankan      html  css  js  c++  java
  • 打印 print-js

    一、传送门:官方文档大神文档

    二、单独使用 print-js

     1   print(ref, title, style, type, jsonData, borderHeadStyle, gridStyle, css) {
     2     printJS({
     3       printable: ref,
     4       header: title || null,
     5       type: type || 'html',
     6       headerStyle: 'font-size:6px;font-weight:600;text-align:center;padding:15px 0 10px 0;',//标题设置
     7       properties: jsonData || [],//json数据元
     8       gridHeaderStyle: borderHeadStyle || 'font-size:6px;font-weight:400;height:40px;line-height:40px;border: 1px solid #ccc;padding:3px 5px 3px 5px;text-align:center;',//json格式表头样式
     9       gridStyle: gridStyle || 'font-size:1px;font-weight:200;border: 1px solid #ccc;padding:3px 5px 3px 5px;text-align:center;',//json各式表哥央视
    10       scanStyles: false,//不适用默认样式
    11       repeatTableHeader: false,//打印json表头只显示在第一页
    12       style: style || '@page{size:auto;margin: 0cm 1cm 0cm 1cm;}',//去除页眉页脚
    13       css: css || null,//css url
    14     })
    15   }

    三、将内容转图片格式进行打印(需要额外安装 html2canvas 插件)

     1   toPrint(ref, title, Rendering) {
     2     html2canvas(ref, {
     3       backgroundColor: null,
     4       useCORS: true,
     5       foreignObjectRendering: Rendering || false,
     6       windowWidth: document.body.scrollWidth,
     7       windowHeight: document.body.scrollHeight
     8     }).then((canvas) => {
     9       const url = canvas.toDataURL()
    10       this.img = url
    11       printJS({
    12         printable: url,
    13         type: 'image',
    14         documentTitle: title
    15       })
    16     })
    17   }
  • 相关阅读:
    codeforce 272B Dima and Sequence
    Codeforce 270D Greenhouse Effect
    codeforce 270C Magical Boxes
    codeforce 270B Multithreading
    图论--Dijkstra算法总结
    图论--(技巧)超级源点与超级汇点
    图论--Floyd总结
    ZOJ 3932 Handshakes
    ZOJ 3932 Deque and Balls
    ZOJ 3927 Programming Ability Test
  • 原文地址:https://www.cnblogs.com/zhuyujie/p/13608410.html
Copyright © 2011-2022 走看看