使用iframe實現預覽PDF文件，或是實現嵌套一個頁面

有時候需要預覽PDF文件，需要實現可放大、縮小、下載、打印等功能，我使用了iframe框架。

有時候需要嵌套一個外來頁面進行展示，且需要通過地址傳入一些參數。

實現效果：

  

 

實現代碼：

<iframe :src="pageUrl" frameborder="0" style="width: 100%; height: 100%"></iframe>

data() {
  return {
    pageUrl: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf', // pdf地址
    pageUrl: "https://www.baidu.com/", // 頁面地址
  }
},

完整代碼：

將iframe插件放在一個公共組件中，URL的pageUrl作為接收參數，在需要嵌套頁面或是預覽文件的組件中直接引用該組件即可。

<!--
  預覽PDF文件
-->
<template>
  <iframe :src="pageUrl" frameborder="0" style="width: 100%; height: 100%"></iframe>
</template>
 
<script>
export default {
  props: {
    pageUrl: {
      // 嵌入頁面URL
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
 
<style lang="scss" scoped>
</style>

注意：

1.src為服務器上的一個PDF文件地址，可直接下載。或是放在服務器上的一個頁面，可直接展示。

2.只需要一個標簽和一個src地址即可實現，不需要再做其他操作，簡單好用。

 

參考文章：https://www.cnblogs.com/steamed-twisted-roll/p/9648255.html