一键搞定！网页内容与附件保存大升级

宝子们，今天要给大家分享一个超实用脚本的升级过程。这个脚本可以在特定网页上一键保存页面内容和附件，原本就很实用，经过这次升级，更是为 ragflow 知识库入库提供了极大便利！下面就一起来看看具体的升级内容吧。

适用网页

这个脚本适用于http://www.nhc.gov.cn/sps/pqt/new_list.shtml，无论是目录页还是文章页，都能轻松应对。

改进前的代码回顾

改进前的脚本虽然能实现保存网页内容为 MD 文件和下载附件的功能，但在文件区分方面不够清晰，不利于 ragflow 知识库入库。

改进内容大揭秘

• 文件名添加发布日期：为了更好地区分不同时间发布的文件，在保存的页面名称和附件名称前都添加了发布日期（格式为 YYYYMMDD）。这样在查看文件时，能快速了解文件的发布时间，方便进行分类和管理。
• 优化日期获取逻辑：新增了 getPublishDate 函数，用于从页面中提取发布日期。如果页面中没有明确的日期信息，会默认使用当前日期，确保文件名的完整性和准确性。

改进后的完整代码

// ==UserScript==
// @name         Save Web Page and Attachments
// @namespace    http://tampermonkey.net/
// @version      1.4
// @description  Provide functions to save web - page content as MD and download attachments on nhc.gov.cn. Support both catalog and article pages.
// @author       You
// @match        *://*.nhc.gov.cn/*
// @grant        GM_xmlhttpRequest
// @require      https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js
// ==/UserScript==

(function () {
    'use strict';

    // 判断当前页面是否为目录页
    const isCatalogPage = /^http:\/\/www\.nhc\.gov\.cn\/sps\/pqt\/new_list(?:_\d+)?\.shtml$/.test(window.location.href);

    if (isCatalogPage) {
        // 目录页逻辑
        const button = document.createElement('button');
        button.textContent = '显示正文链接';
        button.style.position = 'fixed';
        button.style.top = '50%';
        button.style.left = '2.5%';
        button.style.transform = 'translate(-50%, -50%)';
        button.style.zIndex = '9999';
        document.body.appendChild(button);

        button.addEventListener('click', function () {
            const zxxxList = document.querySelector('ul.zxxx_list');
            if (!zxxxList) {
                alert('未找到正文链接列表');
                return;
            }

            const links = zxxxList.querySelectorAll('a');
            const linkList = [];
            links.forEach(link => {
                const linkText = link.textContent.trim();
                const linkUrl = link.href;
                linkList.push({ name: linkText, url: linkUrl });
            });

            const selectDiv = document.createElement('div');
            selectDiv.style.position = 'fixed';
            selectDiv.style.top = '10%';
            selectDiv.style.left = '10%';
            selectDiv.style.zIndex = '9999';
            selectDiv.style.backgroundColor = 'white';
            selectDiv.style.padding = '10px';
            selectDiv.style.border = '1px solid black';

            const selectAllCheckbox = document.createElement('input');
            selectAllCheckbox.type = 'checkbox';
            selectAllCheckbox.id = 'selectAll';
            selectAllCheckbox.addEventListener('change', function () {
                const checkboxes = document.querySelectorAll('.link-checkbox');
                checkboxes.forEach(checkbox => {
                    checkbox.checked = this.checked;
                });
            });
            const selectAllLabel = document.createElement('label');
            selectAllLabel.textContent = '全选';
            selectAllLabel.htmlFor = 'selectAll';
            selectDiv.appendChild(selectAllCheckbox);
            selectDiv.appendChild(selectAllLabel);

            linkList.forEach((linkObj, index) => {
                const checkbox = document.createElement('input');
                checkbox.type = 'checkbox';
                checkbox.classList.add('link-checkbox');
                checkbox.id = `link-${index}`;
                checkbox.checked = true;

                const label = document.createElement('label');
                label.textContent = linkObj.name;
                label.htmlFor = `link-${index}`;

                const br = document.createElement('br');

                selectDiv.appendChild(checkbox);
                selectDiv.appendChild(label);
                selectDiv.appendChild(br);
            });

            const saveButton = document.createElement('button');
            saveButton.textContent = '保存选中';
            saveButton.addEventListener('click', async function () {
                const selectedLinks = [];
                const checkboxes = document.querySelectorAll('.link-checkbox');
                checkboxes.forEach((checkbox, index) => {
                    if (checkbox.checked) {
                        selectedLinks.push(linkList[index]);
                    }
                });
                for (const linkObj of selectedLinks) {
                    await processSinglePage(linkObj);
                }
            });
            selectDiv.appendChild(saveButton);
            document.body.appendChild(selectDiv);
        });
    } else {
        // 正文页逻辑
        const buttonContainer = document.createElement('div');
        buttonContainer.style.position = 'fixed';
        buttonContainer.style.top = '50%';
        buttonContainer.style.right = '10px';
        buttonContainer.style.transform = 'translateY(-50%)';
        buttonContainer.style.zIndex = '9999';
        buttonContainer.style.backgroundColor = 'white';
        buttonContainer.style.border = '1px solid #ccc';
        buttonContainer.style.padding = '5px';
        document.body.appendChild(buttonContainer);

        const saveAttachmentsButton = document.createElement('button');
        saveAttachmentsButton.textContent = '保存附件';
        buttonContainer.appendChild(saveAttachmentsButton);

        const savePageButton = document.createElement('button');
        savePageButton.textContent = '保存页面';
        buttonContainer.appendChild(savePageButton);

        const saveAllButton = document.createElement('button');
        saveAllButton.textContent = '全部保存';
        buttonContainer.appendChild(saveAllButton);

        saveAttachmentsButton.addEventListener('click', saveAttachments);
        savePageButton.addEventListener('click', savePage);
        saveAllButton.addEventListener('click', saveAll);
    }

    // 获取网页正文内容
    function getMainContent(doc = document) {
        const startElement = doc.querySelector('.index_title');
        const endElement = doc.querySelector('.footer');
        if (!startElement ||!endElement) {
            return '';
        }

        let currentElement = startElement;
        let content = '';
        while (currentElement && currentElement!== endElement) {
            content += currentElement.outerHTML;
            currentElement = currentElement.nextElementSibling;
        }
        return content;
    }

    // 获取附件链接
    async function getAttachments(url) {
        // 打开新窗口
        const newWindow = window.open(url, '_blank');
        // 等待新窗口加载完成
        await new Promise(resolve => {
            const checkInterval = setInterval(() => {
                if (newWindow.document.readyState === 'complete') {
                    clearInterval(checkInterval);
                    resolve();
                }
            }, 100);
        });

        const allLinks = newWindow.document.querySelectorAll('a');
        const attachments = [];
        const attachmentExtensions = ['.pdf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx'];
        allLinks.forEach(link => {
            const href = link.href;
            if (attachmentExtensions.some(ext => href.toLowerCase().endsWith(ext))) {
                let fullUrl = href;
                if (!fullUrl.startsWith('http')) {
                    fullUrl = new URL(fullUrl, url).href;
                }
                attachments.push({ link, fullUrl });
            }
        });
        // 关闭新窗口
        newWindow.close();
        return attachments;
    }

    // 保存为 MD 文档
    function saveAsMd(content, title, date) {
        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = content;

        function processElement(element) {
            if (element.tagName === 'TABLE') {
                return htmlTableToMarkdown(element);
            }
            let result = '';
            if (element.childNodes.length > 0) {
                for (let i = 0; i < element.childNodes.length; i++) {
                    const child = element.childNodes[i];
                    if (child.nodeType === Node.TEXT_NODE) {
                        result += child.textContent;
                    } else {
                        result += processElement(child);
                    }
                }
            }
            return result;
        }

        const markdownContent = processElement(tempDiv);
        const blob = new Blob([markdownContent], { type: 'text/markdown;charset=utf-8' });
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = `${date}${title}.md`;
        link.click();
        URL.revokeObjectURL(url);
    }

    // 将 HTML 表格转换为 Markdown 表格
    function htmlTableToMarkdown(tableElement) {
        let markdown = '';
        const rows = tableElement.rows;
        for (let i = 0; i < rows.length; i++) {
            const cells = rows[i].cells;
            let rowMarkdown = '|';
            for (let j = 0; j < cells.length; j++) {
                rowMarkdown += ` ${cells[j].textContent.replace(/(\r\n|\n|\r)/gm, ' ')} |`;
            }
            markdown += rowMarkdown + '\n';
            if (i === 0) {
                markdown += '|';
                for (let k = 0; k < cells.length; k++) {
                    markdown += ' ---- |';
                }
                markdown += '\n';
            }
        }
        return markdown;
    }

    // 下载文件
    function downloadFile(url, fileName) {
        return new Promise((resolve, reject) => {
            GM_xmlhttpRequest({
                method: 'GET',
                url: url,
                responseType: 'arraybuffer',
                onload: function (response) {
                    if (response.status === 200) {
                        const blob = new Blob([response.response], { type: 'application/octet-stream' });
                        const url = URL.createObjectURL(blob);
                        const link = document.createElement('a');
                        link.href = url;
                        link.download = fileName;
                        link.click();
                        URL.revokeObjectURL(url);
                        resolve();
                    } else {
                        reject(new Error(`下载失败，状态码: ${response.status}`));
                    }
                },
                onerror: function (error) {
                    reject(error);
                }
            });
        });
    }

    // 保存附件
    async function saveAttachments() {
        const pageTitle = document.title.replace(/[\\/*?:"<>|]/g, '_');
        const date = getPublishDate();
        const attachments = await getAttachments(window.location.href);
        if (attachments.length > 0) {
            for (const { link, fullUrl } of attachments) {
                try {
                    const linkName = link.textContent.replace(/[\\/*?:"<>|]/g, '_');
                    const fileName = `${date}${linkName}${getExtension(link.href)}`;
                    console.log(`开始下载附件: ${fullUrl}`);
                    await downloadFile(fullUrl, fileName);
                    console.log(`附件 ${fileName} 已保存`);
                } catch (error) {
                    console.error(`下载附件 ${fullUrl} 失败:`, error);
                }
            }
        } else {
            console.log('未检测到附件链接。');
        }
    }

    // 从 URL 获取文件扩展名
    function getExtension(url) {
        const parts = url.split('.');
        return '.' + parts[parts.length - 1];
    }

    // 获取发布日期，这里需要根据页面实际情况修改获取日期的逻辑
    function getPublishDate() {
        // 示例：假设页面中有一个 class 为 publish-date 的元素包含日期信息
        const dateElement = document.querySelector('.publish-date');
        if (dateElement) {
            const dateText = dateElement.textContent;
            // 假设日期格式为 YYYY-MM-DD，需要根据实际情况调整
            const match = dateText.match(/(\d{4}-\d{2}-\d{2})/);
            if (match) {
                return match[1].replace(/-/g, '');
            }
        }
        // 默认返回当前日期
        const now = new Date();
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');
        return `${year}${month}${day}`;
    }

    // 保存页面为 MD
    function savePage() {
        const pageTitle = document.title.replace(/[\\/*?:"<>|]/g, '_');
        const date = getPublishDate();
        const mainContent = getMainContent();
        saveAsMd(mainContent, pageTitle, date);
    }

    // 全部保存
    async function saveAll() {
        savePage();
        await saveAttachments();
    }

    // 处理单个页面
    async function processSinglePage(linkObj) {
        return new Promise((resolve, reject) => {
            GM_xmlhttpRequest({
                method: 'GET',
                url: linkObj.url,
                onload: function (response) {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(response.responseText, 'text/html');

                    // 获取正文页面的绝对链接
                    const absolutePageUrl = new URL(linkObj.url, window.location.origin).href;

                    const pageTitle = linkObj.name.replace(/[\\/*?:"<>|]/g, '_');
                    const date = getPublishDate(doc);
                    const mainContent = getMainContent(doc);
                    saveAsMd(mainContent, pageTitle, date);

                    getAttachments(absolutePageUrl).then(attachments => {
                        if (attachments.length > 0) {
                            attachments.forEach(async ({ link, fullUrl }, index) => {
                                try {
                                    const linkName = link.textContent.replace(/[\\/*?:"<>|]/g, '_');
                                    const fileName = `${date}${linkName}${getExtension(link.href)}`;
                                    console.log(`开始下载附件: ${fullUrl}`);
                                    await downloadFile(fullUrl, fileName);
                                    console.log(`附件 ${fileName} 已保存`);
                                } catch (error) {
                                    console.error(`下载附件 ${fullUrl} 失败:`, error);
                                }
                            });
                        } else {
                            console.log('未检测到附件链接。');
                        }
                        resolve();
                    }).catch(error => {
                        console.error(`获取附件链接失败:`, error);
                        reject(error);
                    });
                },
                onerror: function (error) {
                    console.error(`请求 ${linkObj.url} 失败:`, error);
                    reject(error);
                }
            });
        });
    }
})();
    

总结

通过这次改进，脚本在文件命名上更加规范，能更好地满足 ragflow 知识库入库的需求

宝子们，我和AI死磕网页抓取脚本的全过程！

最近我被一个需求折磨得死去活来，就是要搞一个能抓取网页内容并保存的脚本。你们能想象吗？我本来以为就是写几行代码的事儿，结果折腾了两天，现在还只是个半自动的！今天就来给大家唠唠我和AI死磕这个脚本的全过程。

需求初现：简单任务？大错特错！

一开始，需求看似挺简单，就是在网站上，实现目录页选择保存正文页面为MD格式，还要能下载附件。我心想，这有啥难的，不就是写个Tampermonkey脚本嘛！于是我信心满满地开始动手，结果，现实给了我狠狠一巴掌。

艰难探索：一个问题接着一个问题

目录页按钮与链接获取

先是目录页，我得判断当前页面是不是目录页，然后在页面上添加按钮。这一步就不顺利，我得精确找到目录页的特征。好不容易找到了，添加按钮的时候又遇到问题，按钮位置怎么调都不满意，一会儿在中间偏左，一会儿又被其他元素遮挡。获取正文链接列表也不轻松，网页结构稍微复杂点，querySelector就找不到元素，我在那对着代码抓耳挠腮，头发都快薅掉一把了。

正文页附件下载难题

正文页的问题更多！保存附件时，获取附件链接就很麻烦。链接有时候是相对的，有时候是绝对的，而且基于目录页生成的绝对链接根本不对。我就和AI一起想办法，尝试了好多方法。用new URL来生成绝对链接，结果还是有偏差。后来又试着直接打开正文页面获取链接，代码写得那叫一个复杂，各种异步操作、事件监听，脑袋都快炸了。

AI助力：希望与挫折并存

在这个过程中，AI真的是我的救星，但也让我又爱又恨。我把问题一股脑地抛给它，它每次都能很快给出代码建议。比如修改获取附件链接的代码，它能给出几种不同的思路，像用正则表达式匹配、XPath查询等。但是有些代码放到我的项目里就报错，还得我自己慢慢调试。有时候它理解错我的意思，给的代码和我的需求完全不沾边，真的让人哭笑不得。

成果与展望：继续加油！

经过这两天的努力，虽然还没实现全自动，但也有了一些成果。现在目录页能选择保存正文页面为MD格式了，部分附件也能下载了。看着这些小小的进步，心里还是有点成就感的。不过，距离完全实现全自动还有很长的路要走。我打算继续和AI合作，把剩下的问题解决掉。

代码就懒得展示了

#网页抓取 #Tampermonkey脚本 #AI编程 #代码调试

用豆包轻松搞定 Tampermonkey 脚本！

宝子们，今天来给大家分享一下我是如何借助豆包编程助手编写 Tampermonkey 脚本的，学会了之后真的能让上网变得超有趣又高效！

什么是 Tampermonkey 脚本？

Tampermonkey 是一款超强大的浏览器扩展，它可以让我们通过编写脚本来自定义网页的功能和外观。比如说，你可以去除网页广告、自动填充表单、批量下载图片等等。有了它，上网就像开了挂一样！

准备工作

1. 安装 Tampermonkey 扩展：在你的浏览器扩展商店（像 Chrome、Edge 等）里搜索“Tampermonkey”，然后点击安装就好啦。安装完成后，浏览器右上角会出现一个小猴子图标。
2. 打开豆包编程助手：就是咱们超厉害的豆包啦，它能帮你快速生成脚本代码。

开始编写脚本

我以编写一个“网页另存为 Word 文档”的脚本为例，给大家详细说说步骤。

1. 告诉豆包需求

在和豆包的对话框里，清晰地描述你想要实现的功能。比如我当时就说：“帮我编写一段网页另存为 word 文档的 Tampermonkey 代码，要求保留主页面的所有元素。要求在页面顶端增加一个另存按钮，另外自动命名为网页名称”。把需求说得越详细，豆包给出的代码就越符合你的心意。

2. 获取代码

豆包很快就会生成对应的代码，像这样：

// ==UserScript==
// @name         Save Web Page as Word
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Add a button to save the web page as a Word document.
// @author       You
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 创建一个按钮元素
    const saveButton = document.createElement('button');
    saveButton.textContent = '另存为 Word';
    saveButton.style.position = 'fixed';
    saveButton.style.top = '10px';
    saveButton.style.left = '10px';
    saveButton.style.zIndex = '9999';

    // 将按钮添加到页面
    document.body.appendChild(saveButton);

    // 为按钮添加点击事件监听器
    saveButton.addEventListener('click', function() {
        // 获取网页标题
        const pageTitle = document.title;

        // 获取页面的 HTML 内容
        const htmlContent = document.documentElement.outerHTML;

        // 创建一个 Blob 对象，将 HTML 内容转换为二进制数据
        const blob = new Blob([htmlContent], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });

        // 创建一个 URL 对象
        const url = URL.createObjectURL(blob);

        // 创建一个链接元素
        const link = document.createElement('a');
        link.href = url;
        link.download = `${pageTitle}.docx`;

        // 模拟点击链接以下载文件
        link.click();

        // 释放 URL 对象
        URL.revokeObjectURL(url);
    });
})();
    

3. 创建并粘贴脚本

1. 点击浏览器右上角的 Tampermonkey 小猴子图标，选择“创建一个新脚本”。
2. 把豆包给的代码复制粘贴到 Tampermonkey 的脚本编辑器里。
3. 点击编辑器左上角的“保存”按钮。

4. 测试脚本

打开任意一个网页，你会发现页面顶端出现了“另存为 Word”的按钮。点击这个按钮，网页就会保存为 Word 文档，文件名就是网页的标题。

小技巧和注意事项

• 如果代码运行有问题，仔细检查一下需求描述是否准确，或者跟豆包说清楚问题，让它帮你修改代码。
• 不同的网页可能有不同的结构和安全策略，有些脚本可能在某些网页上无法正常工作，这时候就需要进一步调整代码啦。

宝子们，赶紧动手试试用豆包编写 Tampermonkey 脚本吧，让你的上网体验更上一层楼！

#Tampermonkey #脚本编写 #豆包编程助手 #上网技巧