点击按钮无刷新切换PDF显示尺寸（小/中/大）的技术问询

完全可以通过JavaScript轻松实现这个需求，不用刷新页面就能动态调整PDF容器的显示宽度。下面是具体的实现方案：

1. 调整HTML结构，添加控制按钮 #

先在你的PDF容器旁边加上切换按钮组，方便用户选择不同尺寸：

<!-- 新增的视图控制按钮 -->
<button id="smallPdfBtn">Small PDF</button>
<button id="mediumPdfBtn">Medium PDF</button>
<button id="largePdfBtn">Large PDF</button>

<!-- 你原有的PDF展示容器 -->
<div id="pdfview">
  <object data="filename#view=FitH" type="application/pdf" style="width:100%;" id="pdfHeight" >
    <embed src="filename#view=FitH" type="application/pdf" />
  </object>
</div>

2. 编写JavaScript逻辑处理点击事件 #

接下来添加JS代码，给每个按钮绑定点击事件，动态修改pdfview元素的宽度：

// 获取需要操作的DOM元素
const pdfViewContainer = document.getElementById('pdfview');
const smallBtn = document.getElementById('smallPdfBtn');
const mediumBtn = document.getElementById('mediumPdfBtn');
const largeBtn = document.getElementById('largePdfBtn');

// 给按钮绑定点击事件，切换对应宽度
smallBtn.addEventListener('click', () => {
  pdfViewContainer.style.width = '30%';
});

mediumBtn.addEventListener('click', () => {
  pdfViewContainer.style.width = '60%'; // 中等宽度可以根据你的需求自定义
});

largeBtn.addEventListener('click', () => {
  pdfViewContainer.style.width = '100%'; // 恢复默认的全屏宽度
});

额外优化建议 #

如果需要同时调整PDF本身的缩放模式（比如你原代码里的#view=FitH），也可以在点击事件里同步修改object和embed的资源地址，比如：

const pdfObject = document.getElementById('pdfHeight');
const pdfEmbed = pdfObject.querySelector('embed');

// 比如切换到适合页面的视图模式
pdfObject.data = 'filename#view=Fit';
pdfEmbed.src = 'filename#view=Fit';

这样就能同时控制容器宽度和PDF的内置视图模式，实现更灵活的展示效果。

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