如何使页面在下载文件时保持不变而不重定向

How to make a page remain and not redirect when downloading a file?

本文关键字：重定向 何使页 下载 文件      更新时间：2023-09-26

我有一个JSP，其中有一个链接，当单击该链接时，将下载一个文件。我的问题是，当我点击链接，它去空白页，并留在那里。我要么想让它返回到链接被点击的页面，要么为它下载而不去空白页。什么好主意吗?

目前，我的代码是这样的:

Please <a href="https://webpath/filename.xls">click here</a> to see an example of a valid file.

听起来你正在使用一个on click事件，确保它返回false以留在同一页面

<a href="#" onclick="window.open(/* http://example.com/file.txt */); return false">click me</a>

如果您不使用javascript，则使用_blank将目标设置为空白页面。

<a href="http://example.com/file.txt" target="_blank">click me</a>

我有以下代码不会重定向和下载以下是工作代码

function DownloadFileWithoutRedirect() {
    //url must be hosted else cors issue will come
    //url is entire file url - http://doman.com/test.pdf
    var url = window.location.origin+"/docs/test.pdf";
    var request = new XMLHttpRequest();
    
    request.open('GET', url, true);
    request.responseType = 'blob';
    request.setRequestHeader("Access-Control-Allow-Origin", "*")
    
    request.onload = function() {
        var reader = new FileReader();
        reader.readAsDataURL(request.response);
        reader.onload =  function(e){
            var link = document.createElement("a")
            link.href = e.target.result;
            link.download = "download.pdf";//filename that is kept for dowloading file
            link.click();
            URL.revokeObjectURL(link.href);
        };
    };
    request.send();
    
}

该解决方案使用get调用和blob响应来下载文件，而不需要重定向。进一步的完整代码在Spring Boot + Thymeleaf中说明(解决方案不依赖于Java)为了避免错误，它以这种方式进行了测试。希望以下内容对您有所帮助

StartWebApplication.java 

package com.mkyong;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class StartWebApplication {
    public static void main(String[] args) {
        SpringApplication.run(StartWebApplication.class, args);
    }
}

WelcomeController.java 

package com.mkyong.controller;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class WelcomeController {
    
    @Value("${welcome.message}")
    private String message;
    
    @GetMapping("/")
    public String main(Model model) {
        model.addAttribute("message", message);
        return "welcome"; //view
    }

}

Welcome.html 

<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Spring Boot Thymeleaf Hello World Example</title>
    <link rel="stylesheet" th:href="@{webjars/bootstrap/4.2.1/css/bootstrap.min.css}"/>
</head>
<body>
<main role="main" class="container">
    <div class="starter-template">
        <button class="btn" value="download" onClick="DownloadFileWithoutRedirect()" >Download</button>
    </div>
    
</main>
<!-- /.container -->

<script type="text/javascript" th:src="@{webjars/jquery/3.6.4/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{webjars/bootstrap/4.2.1/js/bootstrap.min.js}"></script>
<script>
function DownloadFileWithoutRedirect() {
    //url must be hosted else cors issue will come
    //url is entire file url - http://localhost:1818/docs/test.pdf
    var url = window.location.origin+"/docs/test.pdf";
    var request = new XMLHttpRequest();
    
    request.open('GET', url, true);
    request.responseType = 'blob';
    request.setRequestHeader("Access-Control-Allow-Origin", "*")
    
    request.onload = function() {
        var reader = new FileReader();
        reader.readAsDataURL(request.response);
        reader.onload =  function(e){
            var link = document.createElement("a")
            link.href = e.target.result;
            link.download = "download.pdf";//filename that is kept for dowloading file
            link.click();
            URL.revokeObjectURL(link.href);
        };
    };
    request.send();
    
}
</script>
</body>
</html>

和pom 

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <artifactId>web-thymeleaf</artifactId>
    <packaging>jar</packaging>
    <name>Spring Boot Web Thymeleaf Example</name>
    <description>Spring Boot Web Thymeleaf Example</description>
    <version>1.0</version>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.2.RELEASE</version>
    </parent>
    <properties>
        <java.version>1.8</java.version>
        <bootstrap.version>4.2.1</bootstrap.version>
        <jquery.version>3.6.4</jquery.version>
    </properties>
    <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-devtools -->
    <dependencies>
    
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
        </dependency>
        <!-- web mvc -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- thymeleaf -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!-- test -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!-- hot swapping, disable cache for template, enable live reload -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
        </dependency>
        <!-- Optional, for bootstrap -->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>${bootstrap.version}</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.webjars/jquery -->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>${jquery.version}</version>
        </dependency>

    </dependencies>
    <build>
        <plugins>
            <!-- Package as an executable jar/war -->
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <addResources>true</addResources>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-surefire-plugin</artifactId>
                <version>2.22.0</version>
            </plugin>
        </plugins>
    </build>
</project>

这是一个来自mkyong的示例项目，其中包含了onclick文件下载

如果文件已经启动并且您不在服务器端生成它，那么这并不难。

调用一个href并为文件设置一个名称:

<a class="badge text-bg-primary" href="your_file_link.txt" download="suggested_file_name">Button text</a>

这有帮助吗?

相关文章：