Chrome浏览器完美保存整个网页-页面离线保存

hrome浏览器完美保存整个网页---页面离线保存

SingleFile 是一个浏览器插件兼容 Chrome、Firefox（桌面端和移动端）、Microsoft Edge、Vivaldi、Brave、Waterfox、Yandex 和 Opera 浏览器。它可以帮助你将一个完整的网页保存为一个单一的 HTML 文件。另一个版本SingleFileZ 是一款可以把一个网页包括图片、样式完整打包压缩后保存为 HTML 的浏览器扩展，并且能够让浏览器实现自解压。SingleFileZ很有意思，SingleFileZ 与 SingleFile 功能完全相同，只不过增加了压缩功能，使用 SingleFile 下载后的单一 HTML 文件为 627KB，而使用 SingleFileZ 下载后的单一 HTML 文件为 265 KB。而更有意思的是，可以直接使用压缩工具打开由 SingleFileZ 生成的 HTML 文件，不过要打开这个压缩 HTML 文件，需要 Chrome 启动时添加 –allow-file-access-from-files 参数。

下载使用

SingleFile在主流的浏览器插件商店可用：

Firefox: https://addons.mozilla.org/firefox/addon/single-file
Chrome: https://chrome.google.com/extensions/detail/mpiodijhokgodhhofbcjdecpffjipkle
Microsoft Edge: https://microsoftedge.microsoft.com/addons/detail/efnbkdcfmcmnhlkaijjjmhjjgladedno

也可以下载插件的 zip 包 – https://github.com/gildas-lormeau/SingleFile/archive/master.zip，拖曳到浏览器插件管理界面进行安装。

SingleFile的使用非常简单，等待网页完全加载完毕，点击插件工具栏上的 SingleFile 按钮即可保存页面，下载的 HTML 文件保存在浏览器设置的本地文件夹。在处理一个页面时，你可以再次点击该按钮来取消该动作。

额外的功能

选择保存整个标签页面、选定的内容、选定的框架
一键处理多个标签页并选择保存
给网页添加高亮字体、笔记、移除内容后保存
自动化下载
自定义保存到 Google Drive 或 GitHub

GitHub 地址：

https://github.com/gildas-lormeau/SingleFile
依托于网站的互联网内容基于所在服务器的稳定性，当我们需要不时参考一些网页时，最好使用 SingleFile 将它们保存到本地；SingleFile 可以一比一复制下载任意网页到单个 HTML，方便管理又不是很占内存，实在是一款数据安全神器。还有另一个不错的Joplin值得推荐！本文不介绍了。

S 鼠标框选（页面选择）时返回对应的 HTML 或文案内容

一、需求背景

1、项目需求

当用户进行鼠标框选选择了页面上的内容时，把选择的内容进行上报。

2、需求解析

虽然这需求就一句话的事，但是很显然，没那么简单...

因为鼠标框选说起来简单，就是选择的内容，但是这包含很多中情况，比如：只选择文案、选择图片、选择输入框、输入框中的内容选择、iframe、等。

简单总结，分为以下几点：

选择文案时
选择图片、svg、iframe、video、audio 等标签时
选择 input、select、textarea 等标签时
选择 input、textarea 标签内容时
选择类似字符时
键盘全选时
鼠标右键选择
以上各模块结合时
当包含标签的时候，返回 html 结构，只有文本时返回文本内容

二、技术要点

鼠标框选包含以下几点：

debounce 防抖
addEventListener 事件监听
Range 对象
Selection 对象

1、debounce

老生常谈的技术点了，这里不能用节流，因为肯定不能你鼠标选择的时候，隔一段时间返回一段内容，肯定是选择之后一起返回。

这里用 debounce 主要也是用在事件监听和事件处理上。

【debounce 掘金】
【debounce CSDN】

2、addEventListener

事件监听，因为鼠标选择，不仅仅是鼠标按下到鼠标抬起，还包括双击、右键、全选。

需要使用事件监听对事件作处理。

【addEventListener MDN】

3、Range

Range 接口表示一个包含节点与文本节点的一部分的文档片段。

Range 是浏览器原生的对象。

3.1. 创建 Range 实例，并设置起始位置

<body>
  <ul>
    <li>Vite</li>
    <li>Vue</li>
    <li>React</li>
    <li>VitePress</li>
    <li>NaiveUI</li>
  </ul>
</body>
<script>
  // 创建 Range 对象
  const range = new Range()
  const liDoms = document.querySelectorAll("li");
  // Range 起始位置在 li 2
  range.setStartBefore(liDoms[1]);
  // Range 结束位置在 li 3
  range.setEndAfter(liDoms[2]);
  // 获取 selection 对象
  const selection = window.getSelection();
  // 添加光标选择的范围
  selection.addRange(range);
</script>

可以看到，选择内容为第二行和第三行

3.1.1 浏览器兼容情况

3.2. Range 属性

startContainer：起始节点。
startOffset：起始节点偏移量。
endContainer：结束节点。
endOffset：结束节点偏移量。
collapsed：范围的开始和结束是否为同一点。
commonAncestorContainer：返回完整包含 startContainer 和 endContainer 的最深一级的节点。

3.2.1. 用我们上面创建的实例来看下 range 属性的值

3.2.2. 如果我们只选择文本内容时

只选择 li 中的 itePres

可以看出 range 属性对应的值

3.3. Range 方法

cloneContents()：复制范围内容，并将复制的内容作为 DocumentFragment 返回。
cloneRange()：创建一个具有相同起点/终点的新范围，非引用，可以随意改变，不会影响另一方。
collapse(toStart)：如果 toStart=true 则设置 end=start，否则设置 start=end，从而折叠范围。
compareBoundaryPoints(how, sourceRange)：两个范围边界点进行比较，返回一个数字 -1、0、1。
comparePoint(referenceNode, offset)：返回-1、0、1具体取决于是 referenceNode 在之前、相同还是之后。
createContextualFragment(tagString)：返回一个 DocumentFragment。
deleteContents()：删除框选的内容。
extractContents()：从文档中删除范围内容，并将删除的内容作为 DocumentFragment 返回。
getBoundingClientRect()：和 dom 一样，返回 DOMRect 对象。
getClientRects()：返回可迭代的对象序列 DOMRect。
insertNode(node)：在范围的起始处将 node 插入文档。
intersectsNode(referenceNode)：判断与给定的 node 是否相交。
selectNode(node)：设置范围以选择整个 node。
selectNodeContents(node)：设置范围以选择整个 node 的内容。
setStart(startNode, startOffset)：设置起点。
setEnd(endNode, endOffset)：设置终点。
setStartBefore(node)：将起点设置在 node 前面。
setStartAfter(node)：将起点设置在 node 后面。
setEndBefore(node)：将终点设置为 node 前面。
setEndAfter(node)：将终点设置为 node 后面。
surroundContents(node)：使用 node 将所选范围内容包裹起来。

3.4. 创建 Range 的方法

3.4.1. Document.createRange

const range = document.createRange();

3.4.2. Selection 的 getRangeAt() 方法

const range = window.getSelection().getRangeAt(0)

3.4.3. caretRangeFromPoint() 方法

if (document.caretRangeFromPoint) {
    range = document.caretRangeFromPoint(e.clientX, e.clientY);
}

3.4.4. Range() 构造函数

const range = new Range()

3.5. Range 兼容性

4、Selection

Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。

4.1. 获取文本对象

window.getSelection()

4.2. Selection 术语

4.2.1. 锚点 (anchor)

锚指的是一个选区的起始点（不同于 HTML 中的锚点链接）。当我们使用鼠标框选一个区域的时候，锚点就是我们鼠标按下瞬间的那个点。在用户拖动鼠标时，锚点是不会变的。

4.2.2. 焦点 (focus)

选区的焦点是该选区的终点，当你用鼠标框选一个选区的时候，焦点是你的鼠标松开瞬间所记录的那个点。随着用户拖动鼠标，焦点的位置会随着改变。

4.2.3. 范围 (range)

范围指的是文档中连续的一部分。一个范围包括整个节点，也可以包含节点的一部分，例如文本节点的一部分。用户通常下只能选择一个范围，但是有的时候用户也有可能选择多个范围。

4.2.4. 可编辑元素 (editing host)

一个用户可编辑的元素（例如一个使用 contenteditable 的 HTML 元素，或是在启用了 designMode 的 Document 的子元素）。

4.3. Selection 的属性

首先要清楚，选择的起点称为锚点(anchor)，终点称为焦点(focus)。

anchorNode：选择的起始节点。
anchorOffset：选择开始的 anchorNode 中的偏移量。
focusNode：选择的结束节点。
focusOffset：选择开始处 focusNode 的偏移量。
isCollapsed：如果未选择任何内容（空范围）或不存在，则为 true。
rangeCount：选择中的范围数，之前说过，除 Firefox 外，其他浏览器最多为1。
type：类型：None、Caret、Range

4.4. Selection 方法

addRange(range): 将一个 Range 对象添加到当前选区。
collapse(node, offset): 将选区折叠到指定的节点和偏移位置。
collapseToEnd(): 将选区折叠到当前选区的末尾。
collapseToStart(): 将选区折叠到当前选区的起始位置。
containsNode(node, partlyContained): 判断选区是否包含指定的节点，可以选择是否部分包含。
deleteFromDocument(): 从文档中删除选区内容。
empty(): 从选区中移除所有范围（同 `removeAllRanges()``，已废弃）。
extend(node, offset): 将选区的焦点节点扩展到指定的节点和偏移位置。
getRangeAt(index): 返回选区中指定索引处的 Range 对象。
removeAllRanges(): 移除所有选区中的范围。
removeRange(range): 从选区中移除指定的 Range 对象。
selectAllChildren(node): 选中指定节点的所有子节点。
setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset): 设置选区的起始和结束节点及偏移位置。
setPosition(node, offset)：collapse 的别名

4.5. Selection 兼容性

三、项目实现

1、实现思路

先获取选择的内容，开发 getSelectContent 函数
对获取的内容进行判断，是否存在 selection 实例，没有直接返回 null
判断 selection 实例的 isCollapsed 属性没有选中，对 selection 进行 toString().trim() 操作，判断内容有内容，直接返回 text 类型无内容，返回 null 有选中，则判断内容
判断选中的内容有没有节点没有节点，则和没有选中一样处理，进行 toString().trim() 操作，判断内容有内容，直接返回 text 类型无内容，返回 null 有节点，进行 toString().trim() 操作，判断内容没有内容，判断是否有特殊节点有 'iframe', 'svg', 'img', 'audio', 'video' 节点，返回 html 类型有 'input', 'textarea', 'select'，判断 value 值，是否存在存在：返回 html 类型不存在：返回 null 没有特殊节点，返回 null 有内容，返回 html 类型
对鼠标 mousedown、mouseup 事件和 selectionchange、contextmenu、dblclick 事件进行监听，触发 getSelectContent 函数
在需要的地方进行 debounce 防抖处理

2、简易流程图

2、Debounce 方法实现

2.1. JS

function debounce (fn, time = 500) {
  let timeout = null; // 创建一个标记用来存放定时器的返回值
  return function () {
    clearTimeout(timeout) // 每当触发时，把前一个 定时器 clear 掉
    timeout = setTimeout(() => { // 创建一个新的 定时器，并赋值给 timeout
      fn.apply(this, arguments)
    }, time)
  }
}

2.2. TS

/**
 * debounce 函数类型
 */
type DebouncedFunction<F extends (...args: any[]) => any> = (...args: Parameters<F>) => void
/**
 * debounce 防抖函数
 * @param {Function} func 函数
 * @param {number} wait 等待时间
 * @param {false} immediate 是否立即执行
 * @returns {DebouncedFunction}
 */
function debounce<F extends (...args: any[]) => any>(
  func: F,
  wait = 500,
  immediate = false
): DebouncedFunction<F> {
  let timeout: ReturnType<typeof setTimeout> | null
  return function (this: ThisParameterType<F>, ...args: Parameters<F>) {
    // eslint-disable-next-line @typescript-eslint/no-this-alias
    const context = this
    const later = function () {
      timeout = null
      if (!immediate) {
        func.apply(context, args)
      }
    }
    const callNow = immediate && !timeout
    if (timeout) {
      clearTimeout(timeout)
    }
    timeout = setTimeout(later, wait)
    if (callNow) {
      func.apply(context, args)
    }
  }
}

3、获取选择的文本/html 元素

3.1. 获取文本/html 元素

nterface IGetSelectContentProps {
  type: 'html' | 'text'
  content: string
}
/**
 * 获取选择的内容
 * @returns {null | IGetSelectContentProps} 返回选择的内容
 */
const getSelectContent = (): null | IGetSelectContentProps => {
  const selection = window.getSelection()
  if (selection) {
    // 1. 是焦点在 input 输入框
    // 2. 没有选中
    // 3. 选择的是输入框
    if (selection.isCollapsed) {
      return selection.toString().trim().length
        ? {
            type: 'text',
            content: selection.toString().trim()
          }
        : null
    }
    // 获取选择范围
    const range = selection.getRangeAt(0)
    // 获取选择内容
    const rangeClone = range.cloneContents()
    // 判断选择内容里面有没有节点
    if (rangeClone.childElementCount > 0) {
      // 创建 div 标签
      const container = document.createElement('div')
      // div 标签 append 复制节点
      container.appendChild(rangeClone)
      // 如果复制的内容长度为 0
      if (!selection.toString().trim().length) {
        // 判断是否有选择特殊节点
        const isSpNode = hasSpNode(container)
        return isSpNode
          ? {
              type: 'html',
              content: container.innerHTML
            }
          : null
      }
      return {
        type: 'html',
        content: container.innerHTML
      }
    } else {
      return selection.toString().trim().length
        ? {
            type: 'text',
            content: selection.toString().trim()
          }
        : null
    }
  } else {
    return null
  }
}
/**
 * 判断是否包含特殊元素
 * @param {Element} parent 父元素
 * @returns {boolean} 是否包含特殊元素
 */
const hasSpNode = (parent: Element): boolean => {
  const nodeNameList = ['iframe', 'svg', 'img', 'audio', 'video']
  const inpList = ['input', 'textarea', 'select']
  return Array.from(parent.children).some((node) => {
    if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return true
    if (
      inpList.includes(node.nodeName.toLocaleLowerCase()) &&
      (node as HTMLInputElement).value.trim().length
    )
      return true
    if (node.children) {
      return hasSpNode(node)
    }
    return false
  })
}

3.2. 只需要文本

/**
 * 获取框选的文案内容
 * @returns {string} 返回框选的内容
 */
const getSelectTextContent = (): string => {
  const selection = window.getSelection()
  return selection?.toString().trim() || ''
}

4、添加事件监听

// 是否时鼠标点击动作
let selectionchangeMouseTrack: boolean = false
const selectionChangeFun = debounce(() => {
  const selectContent = getSelectContent()
  console.log('selectContent', selectContent)
  // todo... 处理上报
  selectionchangeMouseTrack = false
})
// 添加 mousedown 监听事件
document.addEventListener('mousedown', () => {
  selectionchangeMouseTrack = true
})
// 添加 mouseup 监听事件
document.addEventListener(
  'mouseup',
  debounce(() => {
    selectionChangeFun()
  }, 100)
)
// 添加 selectionchange 监听事件
document.addEventListener(
  'selectionchange',
  debounce(() => {
    if (selectionchangeMouseTrack) return
    selectionChangeFun()
  })
)
// 添加 dblclick 监听事件
document.addEventListener('dblclick', () => {
  selectionChangeFun()
})
// 添加 contextmenu 监听事件
document.addEventListener(
  'contextmenu',
  debounce(() => {
    selectionChangeFun()
  })
)

也可以进行封装

/**
 * addEventlistener function 类型
 */
export interface IEventHandlerProps {
  [eventName: string]: EventListenerOrEventListenerObject
}

let selectionchangeMouseTrack: boolean = false
const eventHandlers: IEventHandlerProps = {
  // 鼠标 down 事件
  mousedown: () => {
    selectionchangeMouseTrack = true
  },
  // 鼠标 up 事件
  mouseup: debounce(() => selectionChangeFun(), 100),
  // 选择事件
  selectionchange:  debounce(() => {
    if (selectionchangeMouseTrack) return
    selectionChangeFun()
  }),
  // 双击事件
  dblclick: () => selectionChangeFun(),
  // 右键事件
  contextmenu: debounce(() => selectionChangeFun())
}
Object.keys(eventHandlers).forEach((event) => {
  document.addEventListener(event, eventHandlers[event])
})

5、返回内容

5.1. 纯文本内容

5.2. html 格式

6. 完整 JS 代码

function debounce (fn, time = 500) {
  let timeout = null; // 创建一个标记用来存放定时器的返回值
  return function () {
    clearTimeout(timeout) // 每当触发时，把前一个 定时器 clear 掉
    timeout = setTimeout(() => { // 创建一个新的 定时器，并赋值给 timeout
      fn.apply(this, arguments)
    }, time)
  }
}

let selectionchangeMouseTrack = false
document.addEventListener('mousedown', (e) => {
  selectionchangeMouseTrack = true
  console.log('mousedown', e)
})
document.addEventListener('mouseup', debounce((e) => {
  console.log('mouseup', e)
  selectionChangeFun()
}, 100))
document.addEventListener('selectionchange', debounce((e) => {
  console.log('selectionchange', e)
  if (selectionchangeMouseTrack) return
  selectionChangeFun()
}))
document.addEventListener('dblclick', (e) => {
  console.log('dblclick', e)
  selectionChangeFun()
})
document.addEventListener('contextmenu',debounce(() => {
  selectionChangeFun()
}))

const selectionChangeFun = debounce(() => {
  const selectContent = getSelectContent()
  selectionchangeMouseTrack = false
  console.log('selectContent', selectContent)
})

const getSelectContent = () => {
  const selection = window.getSelection();
  if (selection) {
    // 1. 是焦点在 input 输入框
    // 2. 没有选中
    // 3. 选择的是输入框
    if (selection.isCollapsed) {
      return selection.toString().trim().length ? {
        type: 'text',
        content: selection.toString().trim()
      } : null
    }
    // 获取选择范围
    const range = selection.getRangeAt(0);
    // 获取选择内容
    const rangeClone = range.cloneContents()
    // 判断选择内容里面有没有节点
    if (rangeClone.childElementCount > 0) {
      const container = document.createElement('div');
      container.appendChild(rangeClone);
      if (!selection.toString().trim().length) {
        const hasSpNode = getSpNode(container)
        return hasSpNode ? {
          type: 'html',
          content: container.innerHTML
        } : null
      }
      return {
        type: 'html',
        content: container.innerHTML
      }
    } else {
      return selection.toString().trim().length ? {
        type: 'text',
        content: selection.toString().trim()
      } : null
    }
  } else {
    return null
  }
}

const getSpNode = (parent) => {
  const nodeNameList = ['iframe', 'svg', 'img', 'audio', 'video']
  const inpList = ['input', 'textarea', 'select']
  return Array.from(parent.children).some((node) => {
    if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return true
    if (inpList.includes(node.nodeName.toLocaleLowerCase()) && node.value.trim().length) return true
    if (node.children) {
      return getSpNode(node)
    }
    return false
  })
}

四、总结

鼠标框选上报能监控用户在页面的行为，能为后续的数据分析等提供便利
基于 JS 中的 Selection 和 Range 实现的，使用原生 JS
涉及到的操作比较多，包含键盘、鼠标右键、全选等
能对框选的内容进行分类，区别 html 和 text，更方便的看出用户选择了哪些内容

次为大家介绍了如果用 Python 抓取公号文章并保存成 PDF 文件存储到本地。但用这种方式下载的 PDF 只有文字没有图片，所以只适用于没有图片或图片不重要的公众号，那如果我想要图片和文字下载下来怎么办？今天就给大家介绍另一种方案——HTML。

需解决的问题

其实我们要解决的有两个问题：

公众号里的图片没有保存到 PDF 文件里。
公众号里的一些代码片段，尤其那些单行代码比较长的，保存成 PDF 会出现代码不全的问题。
PDF 会自动分页，如果是代码或图片就会出现一些问题。

综上问题，我觉得还是把公众号下载成网页 HTML 格式最好看，下面就介绍下如何实现。

功能实现

获取文章链接的方式，和上一篇下载成 PDF 的文章一样，依然是通过公众号平台的图文素材里超链接查询实现，在这里我们直接拿来上一期的代码，进行修改即可。首先将原来文件 gzh_download.py 复制成 gzh_download_html.py，然后在此基础进行代码改造：

# gzh_download_html.py
# 引入模块
import requests
import json
import re
import time
from bs4 import BeautifulSoup
import os

# 打开 cookie.txt
with open("cookie.txt", "r") as file:
    cookie = file.read()
cookies = json.loads(cookie)
url = "https://mp.weixin.qq.com"
#请求公号平台
response = requests.get(url, cookies=cookies)
# 从url中获取token
token = re.findall(r'token=(\d+)', str(response.url))[0]
# 设置请求访问头信息
headers = {
    "Referer": "https://mp.weixin.qq.com/cgi-bin/appmsg?t=media/appmsg_edit_v2&action=edit&isNew=1&type=10&token=" + token + "&lang=zh_CN",
    "Host": "mp.weixin.qq.com",
    "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36",
}

# 循环遍历前10页的文章
for j in range(1, 10, 1):
    begin = (j-1)*5
    # 请求当前页获取文章列表
    requestUrl = "https://mp.weixin.qq.com/cgi-bin/appmsg?action=list_ex&begin="+str(begin)+"&count=5&fakeid=MzU1NDk2MzQyNg==&type=9&query=&token=" + token + "&lang=zh_CN&f=json&ajax=1"
    search_response = requests.get(requestUrl, cookies=cookies, headers=headers)
    # 获取到返回列表 Json 信息
    re_text = search_response.json()
    list = re_text.get("app_msg_list")
    # 遍历当前页的文章列表
    for i in list:
        # 目录名为标题名，目录下存放 html 和图片
        dir_name = i["title"].replace(' ','')
        print("正在下载文章：" + dir_name)
        # 请求文章的 url ，获取文章内容
        response = requests.get(i["link"], cookies=cookies, headers=headers)
        # 保存文章到本地
        save(response, dir_name, i["aid"])
        print(dir_name + "下载完成!")
    # 过快请求可能会被微信问候，这里进行10秒等待
    time.sleep(10)

好了，从上面代码可以看出，主要就是将原来的方法 pdfkit.from_url(i["link"], i["title"] + ".pdf") 改成了现在的方式，需要用 requests 请求下文章的 URL ，然后再调用保存文章页面和图片到本地的方法，这里的 save() 方法通过以下代码实现。

调用保存方法

#保存下载的 html 页面和图片
def save(search_response,html_dir,file_name):
    # 保存 html 的位置
    htmlDir = os.path.join(os.path.dirname(os.path.abspath(__file__)), html_dir)
    # 保存图片的位置
    targetDir = os.path.join(os.path.dirname(os.path.abspath(__file__)),html_dir + '/images')
    # 不存在创建文件夹
    if not os.path.isdir(targetDir):
        os.makedirs(targetDir)
    domain = 'https://mp.weixin.qq.com/s'
    # 调用保存 html 方法
    save_html(search_response, htmlDir, file_name)
    # 调用保存图片方法
    save_file_to_local(htmlDir, targetDir, search_response, domain)

# 保存图片到本地
def save_file_to_local(htmlDir,targetDir,search_response,domain):
    # 使用lxml解析请求返回的页面
    obj = BeautifulSoup(save_html(search_response,htmlDir,file_name).content, 'lxml')  
    # 找到有 img 标签的内容
    imgs = obj.find_all('img')
    # 将页面上图片的链接加入list
    urls = []
    for img in imgs:
        if 'data-src' in str(img):
            urls.append(img['data-src'])
        elif 'src=""' in str(img):
            pass
        elif "src" not in str(img):
            pass
        else:
            urls.append(img['src'])

    # 遍历所有图片链接，将图片保存到本地指定文件夹，图片名字用0，1，2...
    i = 0
    for each_url in urls:
        # 跟据文章的图片格式进行处理
        if each_url.startswith('//'):
            new_url = 'https:' + each_url
            r_pic = requests.get(new_url)
        elif each_url.startswith('/') and each_url.endswith('gif'):
            new_url = domain + each_url
            r_pic = requests.get(new_url)
        elif each_url.endswith('png') or each_url.endswith('jpg') or each_url.endswith('gif') or each_url.endswith('jpeg'):
            r_pic = requests.get(each_url)
        # 创建指定目录
        t = os.path.join(targetDir, str(i) + '.jpeg')
        print('该文章共需处理' + str(len(urls)) + '张图片，正在处理第' + str(i + 1) + '张……')
        # 指定绝对路径
        fw = open(t, 'wb')
        # 保存图片到本地指定目录
        fw.write(r_pic.content)
        i += 1
        # 将旧的链接或相对链接修改为直接访问本地图片
        update_file(each_url, t, htmlDir)
        fw.close()

    # 保存 HTML 到本地
    def save_html(url_content,htmlDir,file_name):
        f = open(htmlDir+"/"+file_name+'.html', 'wb')
        # 写入文件
        f.write(url_content.content)
        f.close()
        return url_content

    # 修改 HTML 文件,将图片的路径改为本地的路径
    def update_file(old, new,htmlDir):
         # 打开两个文件，原始文件用来读，另一个文件将修改的内容写入
        with open(htmlDir+"/"+file_name+'.html', encoding='utf-8') as f, open(htmlDir+"/"+file_name+'_bak.html', 'w', encoding='utf-8') as fw:
            # 遍历每行，用replace()方法替换路径
            for line in f:
                new_line = line.replace(old, new)
                new_line = new_line.replace("data-src", "src")
                 # 写入新文件
                fw.write(new_line)
        # 执行完，删除原始文件
        os.remove(htmlDir+"/"+file_name+'.html')
        time.sleep(5)
        # 修改新文件名为 html
        os.rename(htmlDir+"/"+file_name+'_bak.html', htmlDir+"/"+file_name+'.html')

好了，上面就是将文章页面和图片下载到本地的代码，接下来我们运行命令 python gzh_download_html.py ，程序开始执行，打印日志如下：

$ python gzh_download_html.py
正在下载文章：学习Python看这一篇就够了！
该文章共需处理3张图片，正在处理第1张……
该文章共需处理3张图片，正在处理第2张……
该文章共需处理3张图片，正在处理第3张……
学习Python看这一篇就够了！下载完成!
正在下载文章：PythonFlask数据可视化
该文章共需处理2张图片，正在处理第1张……
该文章共需处理2张图片，正在处理第2张……
PythonFlask数据可视化下载完成!
正在下载文章：教你用Python下载手机小视频
该文章共需处理11张图片，正在处理第1张……
该文章共需处理11张图片，正在处理第2张……
该文章共需处理11张图片，正在处理第3张……
该文章共需处理11张图片，正在处理第4张……
该文章共需处理11张图片，正在处理第5张……
该文章共需处理11张图片，正在处理第6张……
该文章共需处理11张图片，正在处理第7张……

现在我们去程序存放的目录，就能看到以下都是以文章名称命名的文件夹：

进入相应文章目录，可以看到一个 html 文件和一个名为 images 的图片目录，我们双击打开扩展名为 html 的文件，就能看到带图片和代码框的文章，和在公众号看到的一样。

总结

本文为大家介绍了如何通过 Python 将公号文章批量下载到本地，并保存为 HTML 和图片，这样就能实现文章的离线浏览了。当然如果你想将 HTML 转成 PDF 也很简单，直接用 pdfkit.from_file(xx.html,target.pdf) 方法直接将网页转成 PDF，而且这样转成的 PDF 也是带图片的。

在线咨询

上一篇：怎么用CSS实现垂直居中？
下一篇：网络安全应急响应（IR）资源大全

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商