如何使用PDFObject让PDF文档完全适配PDFViewer无灰色背景

要解决PDF嵌入后出现灰色背景、无法完全匹配查看器的问题，核心是通过CSS消除容器和PDF嵌入元素的默认样式，并确保缩放时保持适配效果，具体方案如下：

关键修改点 #

• 给PDF容器和嵌入的PDF元素设置透明背景，覆盖浏览器PDF渲染器的默认灰色背景
• 调整容器与嵌入元素的宽高为100%，确保充满整个视口，同时避免多余边距
• 隐藏容器溢出内容，防止缩放时出现不必要的滚动条

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PDFObject Fullscreen Viewer</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body, html, #main, #mypdf {
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }
        /* 定位PDFObject生成的embed元素，设置透明背景 */
        #mypdf embed {
            width: 100%;
            height: 100%;
            background-color: transparent;
            display: block;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.2.4/pdfobject.min.js" integrity="sha512-mW7siBAOOJTkMl77cTke1Krn+Wz8DJrjMzlKaorrGeGecq0DPUq28KgMrX060xQQOGjcl7MSSep+/1FOprNltw==" crossorigin="anonymous"></script>
</head>
<body>
    <main id="main">
        <div id="mypdf"></div>
    </main>
    <script>
        // 嵌入PDF时设置Fit模式，确保初始全屏适配
        PDFObject.embed("myfile.pdf#view=Fit", "#mypdf");
    </script>
</body>
</html>

代码说明 #

1. 全局样式重置：用*选择器清除所有元素的默认边距和内边距，确保没有多余空白
2. 全屏容器设置：将html、body、#main、#mypdf的宽高都设为100%/100vh，overflow:hidden防止出现滚动条
3. Embed元素样式：直接定位PDFObject生成的<embed>标签，设置宽高100%、透明背景，确保PDF完全填充容器，覆盖默认灰色背景
4. PDF初始适配：在嵌入URL后添加#view=Fit参数，让PDF初始加载时自动适配容器尺寸，缩放时也会保持容器内的适配效果

注意：部分浏览器的PDF渲染器可能有特殊默认样式，如果仍有灰色背景，可以尝试给body也设置background-color: transparent，或者检查浏览器是否开启了PDF的深色模式（部分浏览器深色模式下会强制给PDF加灰色背景，需手动关闭）

内容的提问来源于stack exchange，提问作者Dev Dev