道客巴巴文档下载

道客巴巴文档下载

1. 使用方法

在浏览器里按 F12, 唤出开发者工具栏, 控制台内粘贴代码并运行。

2. toDataURL() 方法

2.1. HTMLCanvasElement: toDataURL() method

toDataURL() 是 HTMLCanvasElement 接口中的一项功能方法, 它允许开发者获取 Canvas 元素当前渲染内容的一个数据 URI 表示形式。调用该方法后, Canvas 将其所绘内容转化为指定格式 (通常是图像格式, 如 PNG、JPEG 等) 的数据, 并以 base64 编码的形式嵌入在一个 data: URL 中返回。

2.2. 代码的说明

函数 downloadCanvas (start, end) 实现了一个自动下载指定范围内 Canvas 元素内容为 PNG 格式图片的功能。该函数接收两个整数参数: 起始页码 start 和结束页码 end, 用于确定需要下载哪些 Canvas 页面的内容。

在循环体内, 函数首先通过传入的页码动态构建 Canvas 元素 ID, 然后获取对应的 DOM 元素。如果找到该 Canvas 元素, 则将其内容转化为 PNG 格式的 Data URL。

接下来, 创建一个 img 元素并将 Canvas 内容作为其源, 将图片立即显示在文档 body 中。随后, 创建一个 a 标签作为下载链接, 设置其 href 属性为 Canvas 内容的 Data URL, 这样可以确保链接指向正确的图片数据。

进一步地, 设定下载链接的目标文件名, 格式为 Page - 页码.png。设置链接的显示文本, 包含具体的页码信息以便用户识别。

最后, 将下载链接添加至文档 body, 并模拟点击该链接触发浏览器的下载行为。如此一来, 在调用如 downloadCanvas (1, 5) 时, 将会把编号 1 至 5 的 Canvas 页面内容分别保存为独立的 PNG 图片文件。

2.3. 代码的具体实现

function downloadCanvas (start, end) {
  for (let i = start; i <= end; i++) {
    const canvasElementId = `page_${i}`;
    const canvasElement = document.getElementById (canvasElementId);
    if (canvasElement) {
      const imageDataUrl = canvasElement.toDataURL ("image/png");
      let imgElement = document.createElement ('img');
      imgElement.src = imageDataUrl;
      document.body.appendChild (imgElement);
      let downloadLink = document.createElement ('a');
      downloadLink.href = imageDataUrl;
      downloadLink.download = `Page-${i}.png`;
      downloadLink.textContent = `下载第 ${i} 页 PNG 图像`;
      document.body.appendChild (downloadLink);
      downloadLink.click();
    }
  }
}

2.4. 调用示例

downloadCanvas (1, 5);

3. toBlob() 方法

3.1. HTMLCanvasElement: toBlob() method

toBlob() 是 HTMLCanvasElement 接口提供的一个方法, 它用于将 Canvas 元素当前的图像内容转换为一个 Blob 对象。Blob 对象代表不可变的、原始数据的类文件对象, 可以用来创建或读取二进制数据, 例如图片、文档等。

在 Canvas 上绘制完图形或加载了外部图像后, 调用 toBlob() 方法将会以指定的 MIME 类型 (如 ‘image/png’ 或 ‘image/jpeg’) 生成一个 Blob 数据, 并通过回调函数处理这个 Blob 对象。由于 toBlob() 方法是异步执行的, 所以需要传递一个回调函数来接收生成的 Blob 数据。

3.2. 代码的说明

功能概述: downloadPages 是一个异步 JavaScript 函数, 用于批量下载指定范围内的 HTML Canvas 元素内容为 PNG 图片。该函数接受两个整数参数, 分别为起始页码和结束页码, 按照此范围内的页码顺序依次下载每一页 Canvas 内容。

使用方法: 在网页环境中调用 downloadPages (startPage, endPage) 函数, 其中 startPage 为起始下载页码, endPage 为结束下载页码。例如, downloadPages (1, 10) 表示下载从第 1 页至第 10 页的 Canvas 元素内容。

内部实现流程:

• 遍历指定页码范围, 查找相应 ID (如 page_1 至 page_10) 的 Canvas 元素。
• 对于每个存在的 Canvas 元素, 将其内容转换为 Blob 对象, 以便创建可下载的图像数据。
• 创建一个隐藏的 < a > 标签, 设置其 download 属性为对应的文件名 (如 page_1.png), 并将 Blob URL 赋值给 href 属性。
• 插入 DOM 树中模拟点击下载链接, 触发浏览器的下载行为。
• 下载完成后立即将该链接从 DOM 中移除, 并释放 Blob URL 占用的内存资源。
• 使用 Promise 管理每个页面的下载过程, 并通过 Promise.all 等待所有页面下载完成。
• 在所有页面下载结束后, 控制台输出 “所有页面已下载完毕”。

注意事项: 确保调用该函数前, 页面上已经正确加载了具有相应 ID 的 Canvas 元素, 否则无法下载对应页码的内容。

3.3. 代码的具体实现

async function downloadPages (startPage, endPage) {
    const pagePromises = [];
    for (let currentPage = startPage; currentPage <= endPage; currentPage++) {
        const canvasElement = document.getElementById (`page_${currentPage}`);
        if (!canvasElement) {
            console.warn (`未找到 ID 为"page_${currentPage}"的 Canvas 元素`);
            continue;
        }
        console.log (`开始处理第 ${currentPage} 页`);
        const downloadPagePromise = new Promise ((resolve) => {
            canvasElement.toBlob (blob => {
                if (!blob) {
                    resolve();
                    return;
                }
                const downloadLink = document.createElement ('a');
                downloadLink.download = `page_${currentPage}.png`;
                downloadLink.href = URL.createObjectURL (blob);
                downloadLink.style.display = 'none';
                document.body.appendChild (downloadLink);
                downloadLink.click();
                document.body.removeChild (downloadLink);
                URL.revokeObjectURL (downloadLink.href);
                resolve();
            });
        });
        pagePromises.push (downloadPagePromise);
    }
    await Promise.all (pagePromises);
    console.log ("所有页面已下载完毕");
}

3.4. 调用示例

downloadPages (1, 10);

3.5. 参考博文

• 一键掌握：道客巴巴文档高效下载全攻略，无需积分轻松获取学习资料
• doc88 文档下载方法 - 古道轻风 - 博客园
• doc88 文档下载方法 - CSDN 博客