vue pdfjs的iframe里面html大小自适应

在Vue应用中，结合PDF.js库处理PDF文件时，如果你想让嵌入在Iframe中的HTML页面内容能够自动适应大小，通常需要处理两个方面：设置Iframe的尺寸和PDF内容的显示。

1. 设置Iframe大小：
使用`v-if`或`v-bind:style`属性动态调整iframe的宽度和高度，可以基于视口大小或者页面布局需求来计算。例如：

   <div id="pdf-container">
     <iframe v-bind:src="pdfUrl" :style="{ width: '100%', height: 'auto', overflow: 'auto' }"></iframe>
   </div>

   <script>
   export default {
     data() {
       return {
         pdfUrl: ''
       };
     },
     mounted() {
        // 更新iframe大小或比例
        this.updateIframeSize();
     },
     methods: {
       updateIframeSize() {
         let containerWidth = document.getElementById('pdf-container').clientWidth;
         // 根据需求调整iframe的高度，如高度为contentWidth的90%
         this.pdfUrl += `?viewport=${containerWidth}x${containerWidth * 0.9}`;
       }
     }
   }
   </script>

2. PDF内容自适应：
PDF.js默认会根据页面的比例缩放内容，你可以通过`viewport`参数设置初始的缩放级别，使其适合iframe容器。上述代码示例中的`updateIframeSize`函数就是这么做的，设置了宽度，并按比例调整了高度。

需要注意的是，PDF.js并不直接支持百分比单位，所以这里的高度调整通常是基于容器宽度的一个固定比例。如果你需要更复杂的适应策略，可能需要借助JavaScript事件监听窗口resize，实时更新Iframe大小。