Vue3 PDF 预览，下载

最新推荐文章于 2025-03-18 16:50:44 发布

梦想家NO1

最新推荐文章于 2025-03-18 16:50:44 发布

阅读量240

点赞数

文章标签： pdf javascript vue.js

本文链接：https://blog.youkuaiyun.com/qq_24025219/article/details/130765104

版权

该代码示例展示了在Vue应用中如何引用静态文件（如logo.png）并创建一个点击按钮打开PDF文件（pdf2.pdf）的功能。点击事件触发时，控制台打印文件路径，并使用window.open打开PDF。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.静态文件

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <button v-on:click="testButton">pdf2.pdf</button>

</template>

<script>


export default {
  name: 'App',
  methods:{
       testButton(){
        console.log("./public/pdf2.pdf");
              window.open("/pdf2.pdf");
                   },
           }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>