【JavaScript】如何在豆丁网下载文档并转换为PDF

// 加载jsPDF
var script_jsPDF = document.createElement('script');
script_jsPDF.type = 'text/javascript'; 
script_jsPDF.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js';
document.body.appendChild(script_jsPDF);
 
// 重写下一页按钮为缓慢滚动文档
var nextPage = document.getElementById('nextPage');
 
nextPage.onclick = function() {
    window.scrollTo(0, 0);                              // 滚动到文档顶部
    setInterval(function() { scrollBy(0, 300) }, 300);  // 缓慢滚动使文档加载
}
 
// 定位到页面顶部"下载文档"按钮
var button = document.getElementsByClassName('doc_down_btn')[0];
 
// 重写button的onclick
button.onclick = function() {
    /*
        * 文档通过id = 'page_{i}'进行定位（page_1, page_2, page_3...），这里考虑通过while循环实现
        * 这里需要先加载所有页面
        */
    var pageNum = parseInt(document.getElementsByClassName('page_num')[0].textContent.slice(1));
 
    // 通过jsPDF将所有图片保存到一个pdf文件中
    var pdf = new jsPDF('', 'pt', 'a4', true);
    var imgWidth = 595.28;
    for (var index = 1; index <= pageNum; index++ ) {
        var page = document.getElementById('page_' + index.toString());             // 定位page元素
        var pageCanvas = page.getElementsByTagName('canvas')[0];                    // 获取canvas元素
        var pageData = pageCanvas.toDataURL('image/jpeg', 1.0);                       // 将其转为jpeg图片
        var imageHeight = imgWidth / pageCanvas.width * pageCanvas.height;
        if (index != 1) { pdf.addPage('a4'); }
        pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imageHeight, index, 'FAST'); // 添加到pdf中
    }
 
    // 文档名称
    var title = document.title;
 
    // 保存pdf
    pdf.save(title + '.pdf');
}

如何在豆丁网下载文档并转换为PDF

豆丁网：https://www.docin.com/

一、实现原理

豆丁网的文档是通过canvas元素渲染的，每一页对应一个id为page_i的canvas元素。只有当页面出现在浏览器视口中时，canvas才会加载。因此，我们可以通过以下步骤实现文档下载：

1. 获取文档页数：通过底部工具栏的元素获取文档总页数。
2. 加载全部页面：通过滚动页面，确保所有canvas元素加载完成。
3. 转换为PDF：使用jsPDF库将每个canvas元素转换为图片，并拼接成一个PDF文件。
4. 触发下载：重写“下载文档”按钮，实现PDF文件的下载。

二、实现步骤

完整的代码

// 加载jsPDF
var script_jsPDF = document.createElement('script');
script_jsPDF.type = 'text/javascript';
script_jsPDF.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js';
document.body.appendChild(script_jsPDF);

// 重写下一页按钮为缓慢滚动文档
var nextPage = document.getElementById('nextPage');

nextPage.onclick = function() {
    window.scrollTo(0, 0);  // 滚动到文档顶部
    var scrollInterval = setInterval(function() {
        window.scrollBy(0, 300);  // 每次滚动300像素
        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
            clearInterval(scrollInterval);  // 如果滚动到底部，停止滚动
        }
    }, 300);  // 每300毫秒滚动一次
};

// 定位到页面顶部"下载文档"按钮
var downloadButton = document.getElementsByClassName('doc_down_btn')[0];

// 重写button的onclick
downloadButton.onclick = function() {
    var pageNum = parseInt(document.getElementsByClassName('page_num')[0].textContent.slice(1));  // 获取文档总页数
    var pdf = new jsPDF('', 'pt', 'a4', true);  // 创建PDF对象
    var imgWidth = 595.28;  // A4纸的宽度

    // 遍历每一页
    for (var index = 1; index <= pageNum; index++) {
        var page = document.getElementById('page_' + index);  // 获取每一页的元素
        if (!page) continue;  // 如果页面不存在，跳过

        var pageCanvas = page.getElementsByTagName('canvas')[0];  // 获取canvas元素
        if (!pageCanvas) continue;  // 如果canvas不存在，跳过

        var pageData = pageCanvas.toDataURL('image/jpeg', 1.0);  // 将canvas转为JPEG图片
        var imageHeight = imgWidth / pageCanvas.width * pageCanvas.height;  // 计算图片高度

        if (index !== 1) {
            pdf.addPage('a4');  // 如果不是第一页，添加新页
        }
        pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imageHeight);  // 将图片添加到PDF
    }

    var title = document.title;  // 获取文档标题
    pdf.save(title + '.pdf');  // 保存PDF文件
};

以下是完整的代码实现：

1. 加载jsPDF库

首先，我们需要在页面中引入jsPDF库，用于将canvas元素转换为PDF。

var script_jsPDF = document.createElement('script');
script_jsPDF.type = 'text/javascript';
script_jsPDF.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js';
document.body.appendChild(script_jsPDF);

2. 重写“下一页”按钮

为了加载所有页面，我们可以将“下一页”按钮的功能改为缓慢滚动页面，确保所有canvas元素加载完成。

var nextPage = document.getElementById('nextPage');

nextPage.onclick = function() {
    window.scrollTo(0, 0);  // 滚动到文档顶部
    var scrollInterval = setInterval(function() {
        window.scrollBy(0, 300);  // 每次滚动300像素
        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
            clearInterval(scrollInterval);  // 如果滚动到底部，停止滚动
        }
    }, 300);  // 每300毫秒滚动一次
};

3. 重写“下载文档”按钮

当所有页面加载完成后，我们可以通过以下代码将文档转换为PDF并触发下载。

var downloadButton = document.getElementsByClassName('doc_down_btn')[0];

downloadButton.onclick = function() {
    var pageNum = parseInt(document.getElementsByClassName('page_num')[0].textContent.slice(1));  // 获取文档总页数
    var pdf = new jsPDF('', 'pt', 'a4', true);  // 创建PDF对象
    var imgWidth = 595.28;  // A4纸的宽度

    // 遍历每一页
    for (var index = 1; index <= pageNum; index++) {
        var page = document.getElementById('page_' + index);  // 获取每一页的元素
        if (!page) continue;  // 如果页面不存在，跳过

        var pageCanvas = page.getElementsByTagName('canvas')[0];  // 获取canvas元素
        if (!pageCanvas) continue;  // 如果canvas不存在，跳过

        var pageData = pageCanvas.toDataURL('image/jpeg', 1.0);  // 将canvas转为JPEG图片
        var imageHeight = imgWidth / pageCanvas.width * pageCanvas.height;  // 计算图片高度

        if (index !== 1) {
            pdf.addPage('a4');  // 如果不是第一页，添加新页
        }
        pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imageHeight);  // 将图片添加到PDF
    }

    var title = document.title;  // 获取文档标题
    pdf.save(title + '.pdf');  // 保存PDF文件
};

三、操作步骤

1. 按F12打开开发者工具，切换到Console（控制台）。
2. 将上述代码粘贴到控制台并按下回车执行。
3. 点击“下一页”按钮，页面会自动缓慢滚动到底部，加载所有页面。
4. 滚动到底部后，点击“下载文档”按钮，PDF文件会自动生成并下载。

注意事项

• 页面加载时间：如果文档页数较多，加载所有页面可能需要一些时间，请耐心等待。
• 浏览器兼容性：该代码在大多数现代浏览器中都能正常运行，建议使用Chrome或Firefox。
• 跨域问题：如果豆丁网的canvas元素受到跨域限制，可能会导致无法正确生成图片。此时需要额外的跨域处理。

总结

通过以上方法，我们可以轻松地将豆丁网的文档转换为PDF并下载。这种方法不仅适用于豆丁网，还可以推广到其他类似的文档分享平台。如果你有其他问题或更好的实现方式，欢迎在评论区讨论！

---