如何在MacOS Quick Look插件中用JavaScript获取缩略图尺寸并调整内容？

核心思路 #

Quick Look会为thumbnail.html的运行环境注入专属尺寸变量，同时通过调整CSS盒模型确保容器尺寸正确映射缩略图空间，替代依赖window.innerWidth/Height的不可靠方案。

关键步骤与代码修改 #

1. 获取准确的缩略图目标尺寸
   Quick Look在window对象中提供了qlThumbnailSize属性，包含系统分配的缩略图宽高（qlThumbnailSize.width、qlThumbnailSize.height），这是最精准的尺寸来源。

2. 调整CSS盒模型
   给容器添加box-sizing: border-box，让边框包含在设置的宽高内，避免手动计算边框占用空间：

   #previewGraph{
       border: 5px solid #2955ff;
       box-sizing: border-box;
       width: 100%;
       height: 100%;
   }
   body {
       padding: 0;
       margin: 0;
       font-family: 'Century Gothic';
       width: 100%;
       height: 100%;
       overflow: hidden;
   }
   

3. 修改JavaScript resize逻辑
   使用qlThumbnailSize作为resize参数，同时添加本地测试回退：

   var domGraph = document.getElementById('previewGraph');
   var graphinstance = new Graph(domGraph);
   
   // 获取缩略图尺寸，兼容本地测试环境
   const thumbnailSize = window.qlThumbnailSize || {
       width: window.innerWidth,
       height: window.innerHeight
   };
   
   graphinstance.resize(thumbnailSize.width, thumbnailSize.height);
   
   // 其余图表初始化逻辑保持不变
   graphinstance.newSerie('serieTest').autoAxis().setData(data);
   graphinstance.getXAxis().setAxisDataSpacing(0,0);
   graphinstance.getYAxis().setAxisDataSpacing(0,0);
   graphinstance.getYAxis().setDisplay(false);
   graphinstance.getXAxis().setDisplay(false);
   graphinstance.redraw();
   graphinstance.drawSeries();
   

完整修改后的thumbnail.html代码 #

<html>
    <head>
        <script language='javascript'>%@</script>
        <script language='javascript'>%@</script>
        <script language='javascript'>var data =[%@];</script>
        <style>
            body {
                padding: 0;
                margin: 0;
                font-family: 'Century Gothic';
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            #previewGraph{
                border: 5px solid #2955ff;
                box-sizing: border-box;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id='previewGraph'></div>
        <script>
            var domGraph = document.getElementById('previewGraph');
            var graphinstance = new Graph(domGraph);
            
            const thumbnailSize = window.qlThumbnailSize || {
                width: window.innerWidth,
                height: window.innerHeight
            };
            
            graphinstance.resize(thumbnailSize.width, thumbnailSize.height);
            
            graphinstance.newSerie('serieTest').autoAxis().setData(data);
            graphinstance.getXAxis().setAxisDataSpacing(0,0);
            graphinstance.getYAxis().setAxisDataSpacing(0,0);
            graphinstance.getYAxis().setDisplay(false);
            graphinstance.getXAxis().setDisplay(false);
            graphinstance.redraw();
            graphinstance.drawSeries();
        </script>
    </body>
</html>

内容的提问来源于stack exchange，提问作者Филипп Цветков