Multi-Column Layout for printing (Config Only)

Convert single column layout to multi-column layout based on configuration
当前为 2024-11-05 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Multi-Column Layout for printing (Config Only)
// @namespace    http://tampermonkey.net/
// @license MIT
// @version      1.3.1
// @description  Convert single column layout to multi-column layout based on configuration
// @author       KQ yang
// @match        file:///*
// @grant        GM_addStyle
// @run-at       document-end
// ==/UserScript==

// ========================
// 配置区域 - 直接修改这里的值来调整布局
// ========================
const CONFIG = {
    columns: 2,            // 栏数：1-4
    maxWidth: '95%',       // 最大宽度（建议使用%）
    minWidth: '800px',     // 最小宽度（建议使用px）
    columnGap: '20px',     // 栏间距
    fontSize: '16px',      // 默认字体大小
    paragraphSpacing: '1em', // 段落间距
    enablePageBreak: true,  // 是否允许分页打印，设为false则打印时保持连续
    lineHeight: '1.5',     // 行高
};

(function() {
    'use strict';

    // 创建样式
    const styleSheet = `
        /* 正常显示的多栏样式 */
        .multi-column-container {
            column-count: ${CONFIG.columns} !important;
            column-gap: ${CONFIG.columnGap} !important;
            column-rule: 1px solid #ddd !important;
            padding: 20px !important;
            width: min(${CONFIG.maxWidth}, 100%) !important;
            min-width: ${CONFIG.minWidth} !important;
            margin: 0 auto !important;
            height: auto !important;
            overflow: visible !important;
            box-sizing: border-box !important;
            font-size: ${CONFIG.fontSize} !important;
            line-height: ${CONFIG.lineHeight} !important;
        }

        /* 确保内容不被截断 */
        .multi-column-container > * {
            break-inside: avoid;
            margin-bottom: ${CONFIG.paragraphSpacing} !important;
            max-width: 100%;
            box-sizing: border-box !important;
        }

        /* 打印样式优化 */
        @media print {
            html, body {
                margin: 0 !important;
                padding: 0 !important;
                min-height: 0 !important;
                height: auto !important;
            }

            .multi-column-container {
                width: 100% !important;
                max-width: none !important;
                margin: 0 !important;
                padding: 0 !important;
                min-height: 0 !important;
                ${CONFIG.enablePageBreak ? '' : 'page-break-inside: avoid !important;'}

                /* 移除可能导致空白页的高度设置 */
                height: auto !important;

                /* 确保内容从第一页开始打印 */
                page-break-before: avoid !important;
                page-break-after: avoid !important;
            }

            /* 优化打印时的列布局 */
            .multi-column-container {
                column-gap: 30px !important; /* 打印时减小列间距 */
            }

            /* 确保图片在打印时不会超出页面 */
            .multi-column-container img {
                max-width: 100% !important;
                height: auto !important;
                page-break-inside: avoid !important;
            }

            /* 防止元素在打印时产生意外的分页 */
            .multi-column-container > * {
                page-break-inside: avoid !important;
            }
        }
    `;

    // 添加样式到页面
    GM_addStyle(styleSheet);

    // 查找并应用样式到主要内容区域
    function applyMultiColumn() {
        const mainContent = document.querySelector('.target-content') || document.body;
        mainContent.classList.add('multi-column-container');

        // 添加打印优化
        const printStyle = document.createElement('style');
        printStyle.media = 'print';
        printStyle.textContent = `
            @page {
                margin: 1cm !important;
                padding: 0 !important;
                size: auto !important;
            }
        `;
        document.head.appendChild(printStyle);
    }

    // 在页面加载完成后应用样式
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', applyMultiColumn);
    } else {
        applyMultiColumn();
    }
})();