vue预览pdf，不使用插件，怎么做到高度自适应

在Vue中预览PDF文件而不使用插件，可以通过使用HTML的`<embed>`或`<object>`标签来嵌入PDF文件，并通过CSS样式来控制其高度自适应。以下是一个基本的实现方法：

1. 使用`<embed>`或`<object>`标签嵌入PDF文件。`<embed>`标签主要用于嵌入外部应用程序、ActiveX 控件或者PDF文档等，而`<object>`标签用于定义嵌入的对象。由于`<object>`标签提供了更好的兼容性，这里以`<object>`标签为例：

<object
  type="application/pdf"
  :data="pdfSrc"
  style="width: 100%; height: 100%;"
  @load="handleLoad"
  >
</object>

2. 在Vue组件中定义`pdfSrc`变量来存储PDF文件的URL，并定义`handleLoad`方法来处理PDF加载完成后的逻辑。

data() {
  return {
    pdfSrc: 'https://example.com/path/to/your.pdf'
  };
},
methods: {
  handleLoad(event) {
    const { 0: { contentDocument } } = event.target;
    if (contentDocument) {
      const iframe = contentDocument.defaultView.frameElement;
      // 设置高度自适应
      iframe.style.height = "calc(100vh - 100px)"; // 100px是假设的额外空间
    }
  }
}

3. 通过设置`iframe`的`style.height`属性来控制PDF预览的高度。在上面的代码中，使用了`calc()`函数来动态计算高度，假设我们希望PDF视图占据除去顶部导航栏（例如100px）的剩余视窗高度。这样，PDF视图会根据浏览器窗口大小的变化自动调整大小。

请注意，这种方法可能会受到不同浏览器的兼容性影响，且可能无法完全控制PDF的显示效果。如果需要更复杂的自定义和控制，使用专门的PDF阅读插件可能是一个更好的选择。