使用iframe实现预览PDF文件，或是实现嵌套一个页面

效果如下：

注意：src为服务器上的一个PDF文件地址，可直接下载。或是放在服务器上的一个页面，可直接展示。

// 预览PDF文件（将需要嵌套的模板封装好我这里封装的组件名为`PdfExport`,再从父组件传pdf的url，这里的url是后端处理好的）
<template>
  <iframe :src="pageUrl" frameborder="0" style="width: 100%; height: 50vh"></iframe>
</template>

<script>
export default {
  props: {
    pageUrl: {
      // 嵌入页面URL
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss" scoped></style>

在父组件使用

<el-button @click="look">查看文档</el-button>
<PdfExport :pageUrl="pageUrl" />

 data() {
    return {
      pageUrl: "", // pdf地址
     }
   }

methods: {
    look() {
        this.pageUrl = "<http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf>";
        }
    }

原文地址： www.cnblogs.com/5201314m/p/…