Greasy Fork

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

有 50% 的那张是导出的PDF

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

PDF缩放比例：110%

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

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

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]
    );
}

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

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

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