整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

网页文章资料打印方法

网页文章资料打印方法


开需要的科目课本或资料文章





或者直接复制粘贴打印。

领取免费课本、资料、同步教学视频。

多时候,你想给一个按钮,在网页上通过一个实际的打印机打印出网页的内容。

JavaScript可使用window对象的print函数就可以实现这样的功能。

当执行JavaScript的print函数window.print()将会打印当前页面。可以使用onclick事件如下直接调用此函数:

<head>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<form>
<input type="button" value="Print" onclick="window.print()" />
</form>
</body>1234567891011复制代码类型:[javascript]

这将产生以下按钮,打印此页。

这符合打印出来的页面,但这个不是一个推荐的方式。打印机友好的页面实际上只是一个文本,没有图像,图形或广告页面。

可以使用以下页式打印机友好方式:

使页面的副本,并离开了不需要的文本和图形,然后从原始链接到该打印机友好的页面。

如果你不想让页面的额外副本,那么可以使用像适当的注释标记打印文本 <!-- PRINT STARTS HERE -->..... <!-- PRINT ENDS HERE --> 然后你可以使用PERL或其他脚本在后台清除打印文本和显示进行最后的打印。网站使用同样的方法给打印设备对我们网站的访客。

如何打印页面:

如果没有人在提供上述设备,那么你可以使用浏览器的标准工具栏让网页打印出来。按照链接如下:

File --> Print --> Click OK button.

开课吧广场-人才学习交流平台

、官网介绍

Print.js 主要是为了帮助我们直接在应用程序中打印 PDF 文件,无需离开界面,也不使用嵌入。对于用户不需要打开或下载 PDF 文件,而只需要打印它们的独特情况。
例如,当用户请求打印在服务器端生成的报表时,这很有用的一种情况。这些报告以 PDF 文件的形式发回。在打印这些文件之前,无需打开它们。Print.js提供了一种在我们的应用程序中打印这些文件的快速方法。

官网地址:https://printjs.crabbly.com/

二、安装使用

使用 npm 进行安装

npm install print-js --save

引用

 import printJS from 'print-js'

三、项目示例

vue文件

<template>
  <div id="app">
    <div id="divPrint" class="mainbox print">
      <!-- <div style="font-size: 25px; margin-top: 80px" align="center">
        整改通知单
      </div> -->
      <div align="center" style="margin: 0; padding: 0; width: 100%">
        <table>
          <tr style="border: none">
            <td colspan="2">工程项目:xx</td>
            <td style="text-align: right; padding-left: 10px;" colspan="2">编号:xx</td>
          </tr>
          <tr style="border: none">
            <td colspan="2">整改单位:xx</td>
            <td style="text-align: right; padding-left: 10px;" colspan="2">编号:xx</td>
          </tr>
          <tr style="border: none">
            <td colspan="2">整改内容:xx</td>
            <td style="text-align: right; padding-left: 10px;" colspan="2">编号:xx</td>
          </tr>
        </table>
      </div>
    </div>
    <div style="margin-top: 20px; text-align: center">
      <button @click="print()">pdf打印</button>
    </div>
  </div>
</template>

<script>
import printJS from "print-js";
export default {
  name: "printing",
  data() {
    return {};
  },
  methods: {
    print() {
      printJS({
        printable: "divPrint", // 标签元素id
        type: "html", // 打印类型
        header: "整改通知单", // '表单名称',
        targetStyles: ["*"],
        style: "@page {margin:0 10mm};", // 可选-打印时去掉眉页眉尾
        ignoreElements: ["no-print"], // 接受打印父 html 元素时应忽略的 html id 数组。
        properties: null,
      });
    },
  },
};
</script>

<style lang="scss">
#app {
  width: 100%;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;

  .mainbox {
    width: 100%;
    margin: 0 auto;
  }
}
</style>

点击打印按钮后,出现PDF预览。


pdf文件打印预览

最后再点击打印即可实现PDF文件打印。