精华内容
下载资源
问答
  • 本篇文章主要介绍了vue中将网页打印成pdf实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 关于前端页面的打印成PDF,有不同的方法。 window有一个自带的print(),window.print() 。 (1)这个方法比较简单明了, 调用方法,就会打印出body里面的内容,这种方法根据弹窗,可以自主选择是否添加页眉页脚,...

    关于前端页面的打印成PDF,有不同的方法。

    1. window有一个自带的print(),window.print() 。
      (1)这个方法比较简单明了, 调用方法,就会打印出body里面的内容,这种方法根据弹窗,可以自主选择是否添加页眉页脚,横屏竖屏等功能,比较灵活。
      (2)同时,根据项目,有可能需要在打印的时候显示或隐藏某些内容,或者在打印的时候修改样式等,此刻需要: @media print {} 把需要打印的时候出现的特殊样式,写到这个函数里面,即可在打印的时候起作用,在页面显示的时候不会有效果。
      (3) 可以搭配Window matchMedia() 方法,来捕获打印这一个动作, 可以进行一些比如打印之前或者之后的一些操作,matchMedia()返回一个新的媒体查询对象,
      if (window.matchMedia("(max-width: 900px)").matches) {
      /* 窗口小于或等于 900 像素 */
      } else {
      /*窗口大于 900 像素 */
      }
      addListener(functionref)添加一个监听函数,在执行监听函数监听的操作的时候,会触发某些改变,
      if (window.matchMedia) { var mediaQueryList = window.matchMedia('print'); //页面的打印添加监听事件 mediaQueryList.addListener(function(mql) { if (mql.matches) { //打印之前可以自主的进行一些操作 } else { //打印之后可以自主的进行一些操作 } }); }
    2. jsPDF 和 html2canvas 搭配使用打印页面,这种方法,也更灵活, 可以挑选自己想要打印的部分,也可以加入自己的一些想法。这种方法需要加入水印的时候,个人没有找到更好的办法,我个人是根据分页部分,给元素设置的背景颜色,这种方法其实有弊端,当不同的设备打印的时候,会因为设备不同,页面显示不同,分页部分也不同, 需要自己去做分页地方的不同设备的兼容。
     const downloadPdf = () => {
     	// jsPDF 的第一个参数, p代表竖屏,l 代表横屏
        var pdf = new jsPDF('p', 'pt', 'letter'); 
    
        pdf.canvas.height = 72 * 11; 
        pdf.canvas.width = 72 * 8.5; 
        
    	//需要打印的内容 ,可以自主选择需要打印的部分
        const dom = document.getElementById('dom')
        setTimeout(() => {
          if (dom) {
            html2canvas(dom).then(function (canvas: { width: any; height: any; toDataURL: (arg0: string, arg1: number) => any; }) {
      
              const contentWidth = canvas.width;
              const contentHeight = canvas.height;
              // 一页pdf显示html页面生成的canvas高度;
              const pageHeight = (contentWidth / 592.28) * 841.89;
              // 未生成pdf的html页面高度
              let leftHeight = contentHeight;
              // 控制页面是否偏移
              let position = 0;
              const imgWidth = 595.28;
              //第一个数字可以控制页面的拉伸,可以在需要的情况下适当修改大小
              const imgHeight = (580 / contentWidth) * contentHeight;
              const pageData = canvas.toDataURL('image/jpeg', 1.0);
               // jsPDF 的第一个参数, p代表竖屏,l 代表横屏
              // eslint-disable-next-line new-cap
              const pdf = new jsPDF('p', 'pt', 'a4');
              // 当内容未超过pdf一页显示的范围,无需分页, 页面内容过长不分页,打印出来的是一个长文档。
              if (leftHeight < pageHeight) {
                pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
              } else {
                while (leftHeight > 0) {
                  pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
                  leftHeight -= pageHeight;
                  position -= 841.89;
                  if (leftHeight > 0) {
                    pdf.addPage();
                  }
                }
              }
              pdf.save(`结果.pdf`);
            });
          }
        }, 0)
      }; 
    
    展开全文
  • vue中将网页打印成pdf

    2019-09-17 02:58:33
    <template> <div class="pdf-wrap" id="pdfWrap"> <button v-on:click="getPdf">点击下载PDF</button> <div class="pdf-dom" id=...
    <template>
    <div class="pdf-wrap" id="pdfWrap">
      <button v-on:click="getPdf">点击下载PDF</button>
      <div class="pdf-dom" id="pdfDom"></div>
    </div>
    </template>
    <style lang="scss" scoped>
    
    </style>
    <script type="text/ecmascript-6">
    import html2canvas from 'html2canvas'
    import JSPDF from 'jspdf'
    
    export default {
      name: 'home',
    
      components: {
        chead
      },
      data () {
        return {
          msg: 'home'
        }
      },
      methods: {
        getPdf: () => {
          let pdfDom = document.querySelector('#home')
          html2canvas(pdfDom, {
            onrendered: function (canvas) {
              let contentWidth = canvas.width
              let contentHeight = canvas.height
              let pageHeight = contentWidth / 592.28 * 841.89
              let leftHeight = contentHeight
              let position = 0
              let imgWidth = 595.28
              let imgHeight = 592.28 / contentWidth * contentHeight
    
              let pageData = canvas.toDataURL('image/jpeg', 1.0)
    
              let PDF = new JSPDF('', 'pt', 'a4')
    
              if (leftHeight < pageHeight) {
                PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
              } else {
                while (leftHeight > 0) {
                  PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                  leftHeight -= pageHeight
                  position -= 841.89
                  if (leftHeight > 0) {
                    PDF.addPage()
                  }
                }
              }
              PDF.save('123.pdf')
            }
          })
          html2canvas()
        }
      },
      mounted () {
        this.$nextTick(() => {
          window.addEventListener('resize', () => {
            this.getPdf()
          })
        })
      }
    }
    
    </script>
    

    首先需要需要

    yarn add html2canvas jspdf

    转载于:https://my.oschina.net/xuexipython/blog/967543

    展开全文
  • pdf的可移植性比较好,在不同的操作系统中都能打开,而且安全,但是可编辑性不好,所以通常用markdown编辑内容,写笔记,生成html,在谷歌浏览器打开,打印,另存为pdf。 word文档的可移植性不好,在mac中不方便...

    一、认识markdown

    mweb for mac2.2.7 激活版

    二、pdf和word

    pdf的可移植性比较好,在不同的操作系统中都能打开,而且安全,但是可编辑性不好,所以通常用markdown编辑内容,写笔记,生成html,在谷歌浏览器打开,打印,另存为pdf。

    word文档的可移植性不好,在mac中不方便打开。但是可编辑性非常好,一般也用不着搭配markdown了。

    三、制作电子简历

    之前写简历要么用猎聘或者拉勾网站自动生成,要么自己写word文档,还从来没有写了html生成pdf呢。综合考量后,现在比起word文档,我更倾向于markdown写笔记。

    这样一方面可以投递pdf,另一方面还可以把代码放在某个服务器上,买个域名,然后生成一个访问地址,放在pdf中。

    转载于:https://www.cnblogs.com/camille666/p/webpage_pdf.html

    展开全文
  • 简单的Web表格 这个网站是实习的任务,它是可以以pdf形式打印的Web数据输入或Web表单,我使用bootstrap 5进行网页设计,对于后端我使用php,将网页转换为PDF,我使用Mpdf库
  • 平时不管我们是在网上浏览网页,还是查找资料时,我们都会在遇到一些自己感兴趣的内容,而将这些内容保存下来,才能够方便日后我们有时间的... 其实,这里我们完全能够采用将网页保存成PDF文件格式的方法,来对网页...

      平时不管我们是在网上浏览网页,还是查找资料时,我们都会在遇到一些自己感兴趣的内容,而将这些内容保存下来,才能够方便日后我们有时间的时候进行查看。

      尤其是在需要打印考证时的准考证、资格证书,又或者是查看公告的时候,我们经常会发现,网页上只能选择直接打印,可是自己身边又没有打印机,此时,我们该怎么将重要的网页内容进行保存呢?

      其实,这里我们完全能够采用将网页保存成PDF文件格式的方法,来对网页上的内容进行有效的保存和打印了。那么到底如何将网页保存成PDF文件呢?其实我们只需要使用闪电PDF虚拟打印机软件就能够实现这一需求了。下面就跟着小编一起来学习一下吧,这样一来,网页也能够打印成好看的PDF文件了。

      第一步,在电脑上下载并安装闪电PDF虚拟打印机软件。

      第二步,在电脑的浏览器当中,打开需要进行保存或者是打印成PDF的网页,然后按下鼠标的右键,在弹出的选项当中,选择【打印】功能,或者是直接按下键盘上的【Ctrl】+【P】快捷键,来快速进入到打印页面。

    ed80c5b95244098f579e6ada2144ae58.png

      第三步,此时就会弹出【打印】窗口了,在此窗口当中,选择【闪电PDF虚拟打印机】选项,然后再点击【打印】按钮。

    da18c4d8a9ce4d64c4fa738715871115.png

      第四步,稍等一会儿后,就会跳转到【闪电PDF虚拟打印机】的界面了,在这里,我们将【格式】选择为【PDF】,同时我们还能够根据自己的实际需求,对文件名、导出路径等其他选项进行修改。

    f10d3fbd6eea86697c2ad31a767bc74f.png

      第五步,全部设置好以后,点击界面下方的【导出】按钮。

    c896d6753563cd796517afbb954ba6d7.png

      第六步,稍等一会儿后,软件就会提示你网页已经成功的打印成PDF格式了。最后,双击打开文件进行查看就可以了。

    47a6c3eb643c2df50731bfd0159d0f7b.png
    2e88beca3cdcadd179e8fe3054a4ca4c.png

      以上呢就是小编为大家总结的关于将网页打印成PDF文件的方法了,如果你平时也遇到过像小编一样,想要保存网页却只有打印的选项,而自己的身边又没有打印机的话,那么不妨跟着本文将网页打印成PDF文件的方法学到手吧,这样内容既得到了保存,还能够在后期进行打印,非常的方便。

    展开全文
  • 当我们在浏览器上看到某篇文章时,需要保存下来,大家都会用哪种方式呢? 一般的小伙伴都是复制内容,然后粘贴到Word里...当然了,像老编这种不一般的小伙伴,都是利用PDF虚拟打印机,将它导成PDF格式保存在电脑上...
  • jsp实现网页打印pdf方法)

    热门讨论 2011-05-31 10:12:54
    网页中数据表以pdf方式打印,网上发布的相关解决方法都属于互相copy,且不完善,有很多漏洞。当初我在做的时候为此非常头疼,最后查看了很多资料,将次功能最终实现,为方便大众,将个人的例子上传,以供需要的...
  • 怎么把网页成PDF

    千次阅读 2021-03-22 11:40:56
    在如今的互联网时代,保存和共享网页是比较简单的,您可以通过添加书签或URL来访问网页内容。但是,有时您可能会无法访问互联网。将网页转换为PDF格式是不错的...那么怎么把网页成PDF呢?您可以在本文中查看方法。
  • 网页打印成pdf格式,里面的超链接不能选中,怎么让网页保存为pdf格式并且里面的超链接有效。
  • 在我们浏览网站时,需要保存网页以供日后离线浏览,或是想要分享或打印网页,那就可以考虑把网页转换成PDF文件来简化整个操作。那么应该如何将网页成PDF呢?网页上的信息如何保存成PDF,操作方法是什么?相信很多...
  • 在苹果Mac中如何将html网页成PDF文件?跟着小编来看看操作方法吧! 方法一 1.打开Safari浏览器,找到你想到保存的网页,在「文件」选项里点击「导出为pdf文件」。 2.自动导成PDF格式,选择保存地址存储。 ...
  • html转pdf(带样式)、网页打印神器。可以实现网页的定制化打印功能,还可以实现html转pdf,并且能保留样式。
  • C#网页导出PDF文件

    2018-12-22 11:44:46
    用wkhtmltopdf把网页导为PDF文件,代码测试过了,下载用VS2010可以直接运行使用。
  • --------------------- 原文:... 打印CSDN内容,将以下js复制放入Chrome—>更多工具—>开发者工具—>console,回车即可。 (function(){ $("#side").remove(); $("#comment_t...
  • 可将是用文档打印转换成pdf格式,在同类软件中比较实用,高效
  • Python 爬取网页内容,转成PDF

    千次阅读 2017-05-03 13:59:07
    将廖雪峰的学习教程转换成PDF文件,代码只适合该网站,如果需要其他网站的教程,可靠需要进行稍微的修改。# coding=utf-8 import os import re import time import pdfkit import requests from bs4 import ...
  • 网页打印+转PDF.crx

    2021-02-17 14:03:30
    Chrome插件,支持打印网页网页节选内容转PDF 两大功能,使用时可以轻松去除网页中不需要的内容
  • C#实现打印PDF文件

    热门讨论 2016-04-20 19:42:52
    C#多种方法实现打印PDF文件,可以指定打印机
  • java怎么把HTML界面做成pdf格式打印,遇到难题,求帮助
  • pdf在线打印预览插件

    2019-02-25 09:58:42
    实现pdf在线预览,打印,下载,亲自测试,安全可用 在线演示:http://www.jq22.com/yanshi649
  • 网页导出成PDF

    2021-01-21 23:25:41
    网页内容导出成PDF可以从两个方面实现: 1、前端实现 前端实现在github上搜索后,找到了一个还不错的例子,使用的是jsPDF这些工具包实现的。 有一篇写的不错的博文,详细介绍了前端控制页面生成pdf的方式:html...
  • 可快速构件你的在线PDF打印生成服务 预览案例 bug:苹果手机预览会出线分页和字体大小问题,在于插件依赖js动态计算高度,似乎是因为苹果为了优化,渲染不同步所带来的 使用方式: 渲染机制: 程序会检查全局变量...
  • 在浏览CSDN上某些干货满满的文章时,我们经常会想将其下载至本地然后反复学习,这时便可以通过浏览器自带的打印功能进行网页保存,但是往往在保存时得不到想要的效果。 问题描述: 本来想以PDF格式将自己的博文保存...
  • 网页打印PDF文件

    千次阅读 2018-08-30 11:14:00
    网页打印pdf文件,有两种方式:可以是在java后端通过调用iText PDF的jar包的方法实现PDF打印;也可以在前端调用lodop插件打印pdf文件. PDF文件的内容可以是表格,图片等等,也可以用于打印二维码,条形码,成绩单等...
  • CSDN网页打印PDF格式

    千次阅读 2019-09-02 11:32:46
    CSDN网页打印PDF格式 相较于网页右键打印更加完整简洁 浏览器:Google Chrome 如图打开浏览器的开发者模式 找到 console 窗口,并输入以下代码,回车保存打印。 (function(){ $("#side").remove(); $("#comment_...
  • 利用Python爬取网页中的图片内容,并将其转换为pdf格式的文件。
  • js 原生直接打印pdf 表格 偷懒的程序员:自己也是个小白,只是把自己平时找到的资源整合一下分享给大家,希望大家学习起来更为方便,加油 代码使用到了jspdf.js 和 ...
  • pdf虚拟打印机能够将网页、word、excel等多种能够使用实体打印机打印的文档类型打印成pdf文件

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,559
精华内容 5,823
关键字:

如何网页打印成pdf