Multi-Column Layout for printing (Print Only)

Convert single column layout to multi-column layout only when printing

当前为 2024-11-05 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         Multi-Column Layout for printing (Print Only)
// @namespace    http://tampermonkey.net/
// @license MIT
// @version      1.4
// @description  Convert single column layout to multi-column layout only when printing
// @author       KQ yang
// @match        file:///*
// @grant        GM_addStyle
// @run-at       document-end
// ==/UserScript==

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

(function() {
    'use strict';

    // 创建样式 - 只包含打印相关样式
    const styleSheet = `
        /* 打印样式优化 */
        @media print {
            html, body {
                margin: 0 !important;
                padding: 0 !important;
                min-height: 0 !important;
                height: auto !important;
            }

            .print-column-container {
                column-count: ${CONFIG.columns} !important;
                column-gap: ${CONFIG.columnGap} !important;
                column-rule: 1px solid #ddd !important;
                width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
                min-height: 0 !important;
                height: auto !important;
                overflow: visible !important;
                box-sizing: border-box !important;
                font-size: ${CONFIG.fontSize} !important;
                line-height: ${CONFIG.lineHeight} !important;
                ${CONFIG.enablePageBreak ? '' : 'page-break-inside: avoid !important;'}
            }

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

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

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

    // 查找并应用样式到主要内容区域
    function applyPrintColumns() {
        const mainContent = document.querySelector('.target-content') || document.body;
        mainContent.classList.add('print-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', applyPrintColumns);
    } else {
        applyPrintColumns();
    }
})();