vue项目前端如何在浏览器中添加访问pdf内容

有两种方式：
一、给的是pdf文件，需要自己配置
1、需要先放置PDF文件：

将你的PDF文件放置在服务器的某个目录下，例如/var/www/html/pdfs/。确保服务器有权限读取这个目录中的文件。
2、配置Nginx：

在Nginx的配置文件中为PDF文件添加一个location块。

server {  
    listen 80;  
    server_name 122.0.0.1 your-domain.com;  
 
    # 其他配置...  
 
    location /pdfs/ {  
        alias /var/www/html/pdfs/; # 指向PDF文件存放的目录  
        autoindex on; # 如果需要列出目录内容，可以开启这个选项  
        types {  
            application/pdf pdf; # 指定PDF文件的MIME类型  
        }  
        default_type application/octet-stream;  
        expires max; # 设置缓存过期时间  
        add_header Cache-Control public;  
    }  
 
    # 其他配置...  
}

3、重启nginx

sudo nginx -s reload

4、在浏览器中输入服务器地址端口加/pdfs/filename就可以访问了

5、在vue项目组件中通过iframe嵌入pdf，pdfUrl为pdf的访问地址

<div class="pdf-container">  
      <iframe :src="pdfUrl" width="100%" height="100%"></iframe>  
</div>

6、在访问事件中添加点击事件
点击按钮打开新窗口，并且窗口内容为pdf内容

const newpage = this.$router.resolve({ name:"routername" });
window.open(newpage.href, '_blank');

二、给的是接口，返回文件流

1、直接在html中使用文件接口即可

<div class="pdf-container">  
      <iframe :src="'url?param" width="100%" height="100%"></iframe>  
</div>