vue中使用window.open()方法实现pdf文件的预览操作

---

一、需求

在vue项目中，实现pdf文件的预览、下载和打印(pc端)

二、实现方法

使用window.open(URL,name,specs,replace)实现

该方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
方法包含的参数：

详细使用方法请查看：菜鸟教程

实现代码

pdf组件

<template>
  <div class="pdf-contain">
    <el-link type="primary" @click="downPdf">{{ pdfItem.title }}</el-link>
  </div>
</template>
<script>
export default {
  name: "Pdf",
  props: {
    pdfItem: Object,
  },
  data() {
    return {};
  },
  methods: {
    downPdf() {
      window.open(this.pdfItem.url);
    },
  },
};
</script>

父组件调用
先导入组件import xPdf from "@/components/Pdf/index.vue";
在页面中使用

<template>
<div v-for="item in pdfList" :key="item.title">
    <x-pdf :pdfItem="item"></x-pdf>
</div>
</template>
<script>
export default {
 // 测试pdf
      pdfList: [
        {
          title: "git",
          url: "/static/Git.pdf",
        },
        {
          title: "开发和规范",
          url: "/static/阿里前端开发规范.pdf",
        },
      ],
};
</script>

实现效果

总结

该方法适用于对pdf文件需求不高的项目，使用了浏览器的window对象对pdf进行操作，不需要考虑浏览器兼容性问题。