美文网首页
后台打印功能

后台打印功能

作者: Light_shallow | 来源:发表于2020-06-11 10:37 被阅读0次

业务要求

选择某一条订单,点击打印按钮,弹出一个框显示需要打印出来的内容,
底部存在两个按钮,取消(关闭弹框)打印(调电脑自身的打印预览)

出现的问题

  • 打印预览时,没有表格边框,样式丢失
    原因:
    当表被复制到一个新窗口时,css样式不会被保留。
    可以将一些需要设置的css样式通过拼接用document.write方法中即可解决

  • 打印预览时,页眉显示当天日期和网页标题名字,页尾显示当前的网址
    解决:
    可以直接通过css样式解决

<style media="print">
   @page {
     size: auto;  
     margin: 0mm;  //具体的上下左右边距可以根据实际要求微调
   }
</style>

完整代码如下

let printPageContent = this.$refs['printPage'].$el;
        let printCss= '' +
            '<style media="print">' +
              '@page {' +
                'size: auto;' +
                'margin: 20px 20px 0mm;' +
              '}' +
            '</style>' +
            '<style type="text/css">' +
              'table th, table td {' +
                'border:1px solid #000;' +
              '}' +
              'table {' +
                'border-collapse: collapse;' +
                'border: 1px solid #000000;' +
                'width: 900px;' +
                'margin: 0 auto;' +
              '}' +
              'td {' +
                'border-collapse: collapse;' +
                'border: 1px solid #000000;' +
                'padding: 3px;' +
                'font-size: 14px;' +
              '}' +
              'h1 {' +
                'font-size: 18px;' +
                'line-height: 36px;' +
                'padding: 0;' +
                'text-align: center;' +
              '}' +
            '</style>';
        let iframe;
        if(!!document.getElementById('printArea')){
          iframe = document.getElementById('printArea')
          iframe.contentWindow.document.body.innerHTML = ""
        }else{
          iframe = document.createElement('iframe')
          iframe.id = 'printArea'
          document.body.appendChild(iframe)
        }
        printCss += printPageContent.outerHTML;
        iframe.contentWindow.document.write(printCss);
        iframe.contentWindow.print();
        iframe.contentWindow.close();
      },

相关文章

  • 后台打印功能

    业务要求 选择某一条订单,点击打印按钮,弹出一个框显示需要打印出来的内容,底部存在两个按钮,取消(关闭弹框)打印(...

  • 后台的打印功能

    通常做法: 调用window.print()来启动打印功能。 常见问题点击打印,回到之前的界面,功能都失效,只能浏...

  • JS调用浏览器的打印功能

    最近做一个后台管理系统,其中有个用户需求要求调用浏览器打印的功能去打印订单,本来以为需要用户手动(Ctrl+P)、...

  • iOS 11 无法定位问题:This app has attem

    iPhone 升级到iOS 11后发现的定位功能不可用,通过调试发现异常,系统后台打印: This app has...

  • 打印机共享出现0x000006ba错误的解决方法

    用共享打印机打印时出现这种情况:操作无法完成(0x000006ba)。本地后台打印程序服务没有运行。请重新启动后台...

  • iOS 打印 AirPrint无线打印

    主要功能:使用iPhone、PC连接同一个WiFi,iPhone 上App有打印功能,点击打印,实现打印文档功能。...

  • excel中实用的打印技巧,看一次就会了

    本文介绍了一些基本打印技巧、分页打印、每页打印标题行、打印背景图片、打印页码等功能。这些功能基本涵盖了日常打印需求...

  • uv打印机打印光油实用吗

    uv打印机不是很实用的功能是什么呢?那就是近1年很火的uv打印机打印光油的功能。为什么说uv打印机打印光油的功能不...

  • 2018-04-08 python中创建一个名片管理系统

    1:打印功能 2:判断用户输入 3:执行用户功能 代码如下 1. 打印功能提示 print("="50)print...

  • 2021-10-08-如何批量打印

    如何批量打印pdf word等,比如发票 wps批量打印功能 福昕pdf批量打印功能 先把pdf合并成一个文件,然...

网友评论

      本文标题:后台打印功能

      本文链接:https://www.haomeiwen.com/subject/quqltktx.html