vue @media print使用js插入打印页不同尺寸打印，可自定义尺寸大小，打印机配置

本文链接：https://blog.csdn.net/j123450/article/details/119668689

本文介绍了在Vue单页面应用中如何处理浏览器打印时切换不同纸张尺寸的问题，特别是从A4纸切换到凭证纸。通过移除全局@media设置，使用JavaScript动态插入CSS来指定打印样式，确保只影响打印内容。同时，强调了配置系统自定义打印尺寸的重要性，以及打印机硬件对自定义尺寸的支持情况。在开发和测试过程中，建议使用实际打印机进行测试，以确保打印效果准确。

摘要由CSDN通过智能技术生成

业务需求

在开发时，遇到需求打印时既能切换A4纸张，又能切换成凭证纸张。而使用 @media 设置尺寸后，影响所有页面，无法实现打印多尺寸的问题。

打印技术

使用浏览器自带的 print 打印技术

打印基础

使用此语法即可完成调出浏览器实现局部打印

startprint 和 endprint 设置打印的内容，只会打印两者包含的部分。

 <!--startprint-->
    <div class="data_page">
    {{打印内容}}
    </div>
  <!--endprint-->

  doPrint() {
      window.print();
     },

当设置打印页面尺寸时，我通常在 css 样式中直接使用 @media print

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
print 用于打印机和打印预览

  @media print {
    @page {
      size:  21cm 29.7cm;
      margin: 0;
      padding: 0;
    }

    .noprint {
      display: none;
    }
  }

系统中配置不同尺寸打印

由于 vue 是单页面的项目，在 css 样式中直接使用@media print 会影响到全局，所有在项目中无法使用。
思路：在项目中使用 js 的方式添加到页面中。

步骤1 ：将项目中 css 的 @media print 去除

步骤2 ：在 doPrint 方法中添加 js

此处案例为凭证纸张的大小，并设置了出血的margin。
每个打印上都要手动加上打印尺寸。

doPrint() { 
        var style = document.createElement('style');
        //portrait 纵向 landscape横向
        style.innerHTML = "@media print { @page {size:210mm 230mm!important; margin: 0;padding: 0;margin-top:8.2mm;margin-left:10.05mm;margin-right:5.05mm;margin-bottom:0mm;} .noprint { display: none;}}";
        window.document.head.appendChild(style);
        window.print();
      },

步骤三：像凭证打印纸等尺寸，并非所有打印机都有内置，所以我们需要手动加

打开系统设置
打开打印服务器属性
设置自定义尺寸，设置好后可在打印页中找到更多，里面有打印尺寸
注意事项！！！！
并非设置好了，所有的打印机都可以选择自定义尺寸，还会跟你的打印机硬件有关，有些打印机是不支持的。
在项目中打印凭证纸测试全是靠客户的机子远程测试解决的，我们公司的打印机还是太菜了QAQ。
基本上，打印页面的渲染即打印即所得，那么开发测试的时候咋整呢？
可以在打印机里面更换驱动，但是驱动可能会有问题，打出来的全是外星文哈哈，所以千万不瞎打印，最好留一两张打印纸测试。