☰

Multi-Column Layout for printing (Config Only)

Convert single column layout to multi-column layout based on configuration

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

  1. // ==UserScript==
  2. // @name         Multi-Column Layout for printing (Config Only)
  3. // @namespace    http://tampermonkey.net/
  4. // @license MIT
  5. // @version      1.3.1
  6. // @description  Convert single column layout to multi-column layout based on configuration
  7. // @author       KQ yang
  8. // @match        file:///*
  9. // @grant        GM_addStyle
  10. // @run-at       document-end
  11. // ==/UserScript==
  12.  
  13. // ========================
  14. // 配置区域 - 直接修改这里的值来调整布局
  15. // ========================
  16. const CONFIG = {
  17.     columns: 2,            // 栏数：1-4
  18.     maxWidth: '95%',       // 最大宽度（建议使用%）
  19.     minWidth: '800px',     // 最小宽度（建议使用px）
  20.     columnGap: '20px',     // 栏间距
  21.     fontSize: '16px',      // 默认字体大小
  22.     paragraphSpacing: '1em', // 段落间距
  23.     enablePageBreak: true,  // 是否允许分页打印，设为false则打印时保持连续
  24.     lineHeight: '1.5',     // 行高
  25. };
  26.  
  27. (function() {
  28.     'use strict';
  29.  
  30.     // 创建样式
  31.     const styleSheet = `
  32.         /* 正常显示的多栏样式 */
  33.         .multi-column-container {
  34.             column-count: ${CONFIG.columns} !important;
  35.             column-gap: ${CONFIG.columnGap} !important;
  36.             column-rule: 1px solid #ddd !important;
  37.             padding: 20px !important;
  38.             width: min(${CONFIG.maxWidth}, 100%) !important;
  39.             min-width: ${CONFIG.minWidth} !important;
  40.             margin: 0 auto !important;
  41.             height: auto !important;
  42.             overflow: visible !important;
  43.             box-sizing: border-box !important;
  44.             font-size: ${CONFIG.fontSize} !important;
  45.             line-height: ${CONFIG.lineHeight} !important;
  46.         }
  47.  
  48.         /* 确保内容不被截断 */
  49.         .multi-column-container > * {
  50.             break-inside: avoid;
  51.             margin-bottom: ${CONFIG.paragraphSpacing} !important;
  52.             max-width: 100%;
  53.             box-sizing: border-box !important;
  54.         }
  55.  
  56.         /* 打印样式优化 */
  57.         @media print {
  58.             html, body {
  59.                 margin: 0 !important;
  60.                 padding: 0 !important;
  61.                 min-height: 0 !important;
  62.                 height: auto !important;
  63.             }
  64.  
  65.             .multi-column-container {
  66.                 width: 100% !important;
  67.                 max-width: none !important;
  68.                 margin: 0 !important;
  69.                 padding: 0 !important;
  70.                 min-height: 0 !important;
  71.                 ${CONFIG.enablePageBreak ? '' : 'page-break-inside: avoid !important;'}
  72.  
  73.                 /* 移除可能导致空白页的高度设置 */
  74.                 height: auto !important;
  75.  
  76.                 /* 确保内容从第一页开始打印 */
  77.                 page-break-before: avoid !important;
  78.                 page-break-after: avoid !important;
  79.             }
  80.  
  81.             /* 优化打印时的列布局 */
  82.             .multi-column-container {
  83.                 column-gap: 30px !important; /* 打印时减小列间距 */
  84.             }
  85.  
  86.             /* 确保图片在打印时不会超出页面 */
  87.             .multi-column-container img {
  88.                 max-width: 100% !important;
  89.                 height: auto !important;
  90.                 page-break-inside: avoid !important;
  91.             }
  92.  
  93.             /* 防止元素在打印时产生意外的分页 */
  94.             .multi-column-container > * {
  95.                 page-break-inside: avoid !important;
  96.             }
  97.         }
  98.     `;
  99.  
  100.     // 添加样式到页面
  101.     GM_addStyle(styleSheet);
  102.  
  103.     // 查找并应用样式到主要内容区域
  104.     function applyMultiColumn() {
  105.         const mainContent = document.querySelector('.target-content') || document.body;
  106.         mainContent.classList.add('multi-column-container');
  107.  
  108.         // 添加打印优化
  109.         const printStyle = document.createElement('style');
  110.         printStyle.media = 'print';
  111.         printStyle.textContent = `
  112.             @page {
  113.                 margin: 1cm !important;
  114.                 padding: 0 !important;
  115.                 size: auto !important;
  116.             }
  117.         `;
  118.         document.head.appendChild(printStyle);
  119.     }
  120.  
  121.     // 在页面加载完成后应用样式
  122.     if (document.readyState === 'loading') {
  123.         document.addEventListener('DOMContentLoaded', applyMultiColumn);
  124.     } else {
  125.         applyMultiColumn();
  126.     }
  127. })();