jjzjj

前端使用print.js实现打印

无知的小菜鸡 2024-02-28 原文

前言

项目中经常会用到前端调用浏览器打印的功能，也经常会遇到一些问题，写这篇文章是为了更好的梳理一下相关内容。下面的内容基于vue。
如果需要用到前端生成二维码可以看我的这篇文章：在vue项目中使用qrcodesjs2生成二维码

注：以下都是基于edge浏览器进行的，另外身边没有打印机，实际打印效果如何不清楚

print.js

这里用一下别人写好的库，print-demo

项目下载下来后，找到print.js，我们只需要这个。如果是vue2的项目直接用就好了，vue3的项目就简单改一下就可以

// const MyPlugin = {};
// MyPlugin.install = function (Vue, options) {
//     // 4. 添加实例方法
//     Vue.prototype.$print = Print;
// };
// export default MyPlugin;

export default Print;

如何使用

声明打印区域

可通过设置class 类名或 id 指定打印区域，但由于vue项目涉及到打包部署，推荐使用ref获取DOM节点，如果使用id或class获取，打包部署后打印内容可能显示空白。

<div class="printDom">指定打印区域</div>

<div id="printDom">指定打印区域</div>

<div ref="printDom">指定打印区域</div>

调用打印方法

  • vue2 项目
//main.js
import Print from './print';
Vue.use(Print);

// xx.vue
 this.$print(this.$refs.printDom, {});
  • vue3项目，在需要使用的页面，引入方法，然后方法调用。

声明不打印区域

  • 声明"no-print"类名 ，此时print方法中，不需要特意声明，默认会剔除.no-print区域
<div class="no-print">不打印区域</div>
Print('#printDom');
  • 自定义类名，此时需要在print方法中通过"noPrint"属性指定不打印区域
<div class="no-print-box">自定义不打印区域类名</div>

Print('#printDom',{noPrint:'.no-print-box'});

参数说明

this.$print(this.$refs.printDom, {
     noPrint: '.noPrint',
     onStart: () => {
        console.log('打印开始');
     },
     onEnd: () => {
         onsole.log('打印完成');
     }
});

样式

table样式

打印中表格是不可或缺的，从网上找了份样式简单修改了一下。如果觉得不好看，可以自己改一下

 table {
    border-collapse: collapse;
    margin: 0 auto;
    width: 100%;
}

table tr {
    background: #EFF3F5;
}

table td,
table th {
    /**文字垂直、水平居中 */
    vertical-align: middle;
    text-align: center;
    /** 基础样式 */
    border: 2px solid black;
    border-left: 0px;
    color: #666;
    height: 40px;
    font-size: 18px;
    min-width: 150px;
    line-height: 30px;
}

table td:last-child,
table th:last-child {
    border-right: 0px;
}

table thead th {
    background-color: #CCE8EB;
    width: 100px;
}


但是实际在浏览器里的显示还是有些差距的，原因暂时不清楚，有指定的大佬欢迎留言

与打印有关的样式

参考文章：打印样式设计

分页符

如果一次只打印一条数据还是可以的，但是如果打印多条数据，就会存在数据被切割的问题，如下图：

为了解决这个问题，css提供了page-break-after、page-break-before、page-break-inside这三个属性，一般只需要用到第一个即可，其他可自行百度。

page-break-after
page-break-after 属性用于设置在指定元素后面插入分页符。

值描述
auto默认。如果必要则在元素后插入分页符。
always在元素后插入分页符。
avoid避免在元素后插入分页符。
left在元素之后足够的分页符，一直到一张空白的左页为止。
right在元素之后足够的分页符，一直到一张空白的右页为止。

注：

  • Firefox，Chrome 和 Safari 不支持属性值"avoid"，“left"和"right”。
  • 不能对绝对定位的元素使用此属性。

通常我们可以设置：page-break-after: always; 在每一条数据后面都添加一个分页符，这样打印时会保证每条数据相互独立

@page

@page规则允许你指定页面盒子的许多方面。例如，你想要指定页面尺寸。下面这条规则指定默认页面尺寸是5.5*8.5英尺。如果你想打印一本书，也许通过按需打印，找到可用尺寸很重要。

@page { size: 5.5in 8.5in; }

除了可以用长度值声明尺寸，你还可以使用纸质尺寸关键字，例如"A4"或““legal”。

@page {
  size: A4;
}

你也可以使用关键字来指定页面方向 portrait（竖向的）或landscape（横向的）。

@page { size: A4 landscape; }

使用注意： @page 不要嵌套在容器里，与其他dom无关系

默认：

修改后

@page {
    size: A3 landscape;
}

页面左边距和右边距

我们可以用这些选择器给页面定义不同的边距尺寸。

@page :left { margin-left: 1cm; }
@page :right { margin-left: 8cm; }

注： 测试了一下，left好像没生效，另外还与布局是横向还是纵向有关

规则还定义了两个伪类选择器。:first选择器选中是文档的第一页。

@page :first {
}

:blank伪类选择器选中任何“故意左侧留白”的页面。要添加这样的文字，我们可以使用目标是边距盒顶部中心的生成内容。

@page :blank { @top-center { content: "This page is intentionally left blank." } }

注：并没有在浏览器中看到任何文字，当然也有可能是我理解的有问题

除了@top-center外，还有以下位置：

其他内容略，自行查看参考的文章，没有相应的效果，不想继续看了

printjsspanclasstoken前端javascript

有关前端使用print.js实现打印的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  5. ruby - 在 Ruby 中使用匿名模块 - 2

    假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？ 最佳答案 三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

  6. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我

  7. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  8. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  9. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  10. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

随机推荐