如何完美地把网页内容导出为PDF

0引言

本文写于2021年12月上旬。
经查,2023年03月此方式仍然可以使用。
众所周知,Chrome以其丰富的插件库大大扩展了浏览器的可玩性和可操作性。本教程介绍一种利用插件、从Chrome浏览器完美导出网页内容为PDF文件的方法,并保存为本地文件,方便以后查阅。

1所需软件及环境

  1. Chrome浏览器
  2. uBlock Origin插件
  3. Win10操作系统
    本教程使用的Chrome浏览器版本号为 96.0.4664.93(正式版本)(64 位),uBlock Origin插件(这是一款高效的网络请求过滤工具,占用极低的内存和 CPU)版本号为1.38.0。不同版本的软件操作不完全相同,本教程亦可作为参照(比如使用Edge浏览器)。

2具体操作步骤

2.1环境搭建

  1. Chrome浏览器百度找官网即可下载安装。
  2. uBlock Origin插件下载方式:
  • ①百度查找官网下载;
  • ②通过谷歌助手破解版插件进入谷歌插件商店,搜索后一键安装;
  • ③百度搜索谷歌插件商店,通过第三方下载。
  1. uBlock Origin安装:
  • ①打开Chrome设置,进入扩展程序,打开开发者模式;
  • ②将下载好的.crx文件或.zip或.rar文件拖入Chrome内即可自动安装。(PS:本步可能会报错,提示无法安装或者直接出现下载。如遇上述情况,关闭开发者模式再次尝试或者关闭Chrome后重新打开再次尝试或者等一段时间再次尝试,Chrome有时会犯病)。
    安装成功后如下图:
    在这里插入图片描述
    主界面显示:
    在这里插入图片描述
  1. 关闭开发者模式,重启浏览器。

2.2去除广告及不需要的网页元素(以某乎为例)

  1. 打开某乎,原文章如下:
    在这里插入图片描述
  2. 通过uBlock Origin屏蔽广告以及元素。
    点开uBlock Origin插件,选择进入元素选择器模式。
    在这里插入图片描述
    此时网页进入屏蔽元素模式,随鼠标移动会显示红色框。
    选中某乎网页顶端部分后,右下角会有屏蔽提示。
    在这里插入图片描述
    点击创建。
    在这里插入图片描述
    创建完成后,此时顶端以已经没有原来某乎网页顶部。在这里插入图片描述
    顶部整体显示如下。在这里插入图片描述
    以此类推,去掉网页底部非内容元素。在这里插入图片描述
    网页最终效果如下。在这里插入图片描述
  3. 导出PDF。
    利用Chrome自带的导出网页为PDF格式,即可以获得完美的网页内容。
    在这里插入图片描述
    在这里插入图片描述

3总结

本教程提供了一种导出网页的教程,专注于内容而非其他元素和广告。
如有纰漏敬请指正。
本文写于2021年12月上旬。

  • 9
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Vue 中实现导出超长网页PDF,可以使用第三方库 jsPDF 和 html2canvas。以下是实现步骤: 1. 安装 jsPDF 和 html2canvas: ``` npm install jspdf html2canvas --save ``` 2. 在需要导出 PDF 的组件中引入 jsPDF 和 html2canvas: ```javascript import jsPDF from 'jspdf'; import html2canvas from 'html2canvas'; ``` 3. 定义一个方法用来导出 PDF: ```javascript exportPdf() { const pdfName = 'example.pdf'; // 定义导出PDF 文件名 const pdfOptions = { orientation: 'p', // 纵向,也可以设置为 'l' 横向 unit: 'mm', // 毫米 format: 'a4', // A4 纸 compress: true, // 压缩 fontSize: 12, // 字体大小 lineHeight: 1.2, // 行高 }; const pdf = new jsPDF(pdfOptions); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); const element = document.getElementById('pdf-content'); // 获取需要导出的元素 html2canvas(element, {scale: 1}).then(canvas => { const contentWidth = canvas.width; const contentHeight = canvas.height; const totalPages = Math.ceil(contentHeight / pdfHeight); let position = 0; for (let i = 0; i < totalPages; i++) { pdf.addImage(canvas, 'JPEG', 0, position, pdfWidth, pdfHeight); position -= pdfHeight; if (i < totalPages - 1) { pdf.addPage(); } } pdf.save(pdfName); }); } ``` 4. 在需要导出的组件中添加一个元素用来包含需要导出内容,并设置一个 id: ```html <div id="pdf-content"> <!-- 需要导出内容 --> </div> ``` 5. 在需要导出 PDF 的地方调用 `exportPdf()` 方法即可。 这样就可以在 Vue 中完美导出超长网页PDF 了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值