Greasy Fork is available in English.

Wenku Doc Downloader

对文档截图,合并为纯图片PDF。有限地支持(1)豆丁网(2)道客巴巴(3)360个人图书馆(4)得力文库(5)MBA智库(6)爱问文库(7)原创力文档(8)读根网(9)国标网(10)安全文库网(11)人人文库(12)云展网(13)360文库(14)技工教育网(15)文库吧(16)中国社会科学文库(17)金锄头(18)自然资源标准。预览多少页,导出多少页。额外支持(1)食典通(2)JJG 计量技术规范,详见下方说明。

< 脚本Wenku Doc Downloader的反馈

提问/评论

§
发表于:2022-11-21

http://c.gb688.cn 导出清晰度好像不如直接截图。删掉 #viewerContainer.pdfViewer .pageborder 样式后使用开发者工具节点截图截出来的图和用这个脚本导出PDF缩放到和截图差不多的大小,感觉不如截图清晰,是错觉吗?

§
发表于:2022-11-21

有 50% 的那张是导出的PDF

Allen Lv作者
§
发表于:2022-11-22

我对比不出区别,我测试的网址:http://c.gb688.cn/bzgk/gb/showGb?type=online&hcno=E86BBCE32DA8E67F3DA04ED98F2465DB

PDF缩放比例:110%

§
发表于:2022-11-22

我还是觉得截图清晰点,无论是你给的网址还是我测试的网址 http://c.gb688.cn/bzgk/gb/showGb?type=online&hcno=1D986D9DCCC518D19DAD9431DD76053E

firefox okular+gwenview firefox GB14023—2022

另外我这边导出的 PDF 选择 100% 比源页面的 100% 和截图都大很多。

Allen Lv作者
§
发表于:2022-11-23

http://c.gb688.cn/bzgk/gb/showGb?type=online&hcno=1D986D9DCCC518D19DAD9431DD76053E

用的这个网址,实在比不出差别。比如下面这个,A版是网页截图,B版是脚本导出的PDF,有区别吗?

另外,我看自己的代码看不出可以改善的地方,如果你可以帮忙,下面是导出PDF的核心代码:


/**
 * 将canvas转为jpeg,然后导出PDF
 * @param {Array} node_list canvas元素列表
 * @param {string} title 文档标题
 */
function saveCanvasesToPDF(node_list, title, width = 0, height = 0) {
    // 如果没有手动指定canvas的长宽,则自动检测
    if (!width && !height) {
        // 先获取第一个canvas用于判断竖向还是横向,以及得到页面长宽
        let first_canvas = node_list[0];

        if (first_canvas.width && parseInt(first_canvas.width) && parseInt(first_canvas.height)) {
            [width, height] = [first_canvas.width, first_canvas.height];
        } else {
            let [width_str, height_str] = [first_canvas.style.width.replace(/(px)|(rem)|(em)/, ""), first_canvas.style.height.replace(/(px)|(rem)|(em)/, "")];
            [width, height] = [parseInt(width_str), parseInt(height_str)];
        }
    }

    console.log(`canvas数据:宽: ${width}px,高: ${height}px`);
    // 如果文档第一页的宽比长更大,则landscape,否则portrait
    let orientation = width > height ? 'l' : 'p';
    // jsPDF的第三个参数为format,当自定义时,参数为数字数组。
    let pdf = new jspdf.jsPDF(orientation, 'px', [height, width]);

    // 保存每一页文档到每一页pdf
    let last_canvas = node_list.pop();
    node_list.forEach(canvas => {
        pdf.addImage(canvas, 'png', 0, 0, width, height);
        pdf.addPage();
    });
    // 添加尾页
    pdf.addImage(last_canvas, 'png', 0, 0, width, height);

    // 导出文件
    pdf.save(`${title}.pdf`);
}



/**
 * 下载目标图像并拆解重绘, 返回canvas
 * @param {number} i 第 i 页 (从0开始)
 * @param {HTMLDivElement} page_div
 * @returns {Promise<Array>} [页码, Canvas]
 */
async function getAndDrawPage(i, page_div) {
    // 拿到目标图像
    let url = getPageURL(page_div);
    let page = await getPage(url);

    // 绘制空白A4纸背景
    let [page_w, page_h] = [1190, 1680];
    let bg = document.createElement("canvas");
    bg.width = page_w; // 注意canvas作为取景框的大小
    bg.height = page_h; // 如果不设置等于一个很小的取景框

    let bg_ctx = bg.getContext("2d");
    bg_ctx.fillStyle = "white";
    bg_ctx.fillRect(0, 0, page_w, page_h);

    // 逐个区块剪切取出并粘贴
    // wk$("#viewer .page").forEach(page_div => {
    getPostions(page_div).forEach(pos => {
        bg_ctx.drawImage(
            page, // image source
            pos[0], // source x
            pos[1], // source y
            120, // source width
            169, // source height
            pos[2] * page_w, // destination x = left: x%
            pos[3] * page_h, // destination y = top: y%
            120, // destination width
            169 // destination height
        )
    });
    // });
    return [i, bg];
}


/**
 * 页面批量请求、裁剪重绘, 合成PDF并下载
 */
async function turnPagesToPDF() {
    // 渲染每页
    let tasks = [];
    wk$("#viewer .page").forEach((page_div, i) => {
        tasks.push(
            getAndDrawPage(i, page_div)
        );
    });

    // 等待每页渲染完成后,排序
    let results = await Promise.all(tasks);
    results.sort((prev, next) => prev[0] - next[0]);

    // 合并为PDF并导出
    utils.saveCanvasesToPDF(
        results.map(item => item[1]),
        // '在线预览|GB 14023-2022'
        document.title.split("|")[1]
    );
}

§
发表于:2022-11-24

可能是生成 PDF 文件会压缩图片,查看 PDF 文件还会缩放图片,这就导致了不如截图清晰。试了下 pdfimages 将导出的 PDF 转成图片,得到的图片比直接看 PDF 清晰。又试了下用 PDF Arranger 将截图做成 PDF,会得到一个模糊点的文件,再用 pdfimages 导出又能看到清晰点的图片。

§
发表于:2023-05-25

http://c.gb688.cn 导出清晰度好像不如直接截图。删掉 #viewerContainer.pdfViewer .pageborder 样式后使用开发者工具节点截图截出来的图和用这个脚本导出PDF缩放到和截图差不多的大小,感觉不如截图清晰,是错觉吗?




不是错觉,但是作者代码没有问题。你感觉模糊的区别在于,俩者分辨率不同。原始图像(亦即100%大小截图)1190*1680,分辨率为72像素/英寸;生成的PDF图像为2592*3666,分辨率为313像素/英寸,PDF放大了。

发表回复

登录以发表回复。