通过react/axios查看来自spring get请求的pdf
通过react/axios查看来自spring get请求的pdf，可以按照以下步骤进行：
- 在React项目中安装axios库，可以使用以下命令：
- 在React项目中安装axios库，可以使用以下命令：
- 在React组件中引入axios库：
- 在React组件中引入axios库：
- 在组件中定义一个函数，用于发送GET请求并获取PDF文件：
- 在组件中定义一个函数，用于发送GET请求并获取PDF文件：
- 在组件中调用该函数，例如在按钮的点击事件中：
- 在组件中调用该函数，例如在按钮的点击事件中：
这样，当用户点击按钮时，React组件将使用axios发送GET请求到Spring API的指定端点。Spring API将返回一个PDF文件的二进制数据，然后通过Blob对象将其转换为可用的文件对象。最后，使用URL.createObjectURL()方法创建一个临时URL，通过window.open()在新窗口中打开PDF文件。
这种方法适用于通过GET请求获取PDF文件并在浏览器中查看。如果需要其他操作，例如下载PDF文件或在页面中嵌入PDF，可以根据具体需求进行相应的处理。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
相关·内容
3回答
我想使用react-pdf来显示PDF，并开发一个打印函数来直接打印(比如使用window.print())；
REST服务器是使用Jersey开发的。
PDF将从服务器生成，并使用Jersey返回到React客户端，返回类型为application/pdf。React客户端将使用react-pdf显示PDF。
我不想在"file“中声明URL路径，因为如果React状态改变并触发重新渲染，这将再次从服务器检索PDF。另外，我需要开发一个打印功能来打印显示的PDF (因为如果再次从服务器检索PDF，PDF内容可能会更改)
下面显示了我的代码：
服务器：
@Override
@GET
@
浏览 2提问于2018-12-30得票数 1
回答已采纳
我想使用Axios发布到我的Spring Boot服务器。如果我使用csrf禁用.csrf().disable()，它将正确工作，但当启用时会失败。
我尝试将X-CSRF-TOKEN添加到头中，或者在正文中添加_csrf，但是它说它是无效的。检查请求，csrf将按预期的方式传入。
CSRF控制器
@RequestMapping("/csrf")
public String csrf(final CsrfToken token) {
return token.getToken();
}
Spring安全
httpSecurity
.antMatcher(&
浏览 16提问于2022-01-31得票数 1
我想在reactjs组件中使用/data/todo.js文件。我使用了axios http请求来获取我的react组件中的数据，即，
import React, { Component } from 'react';
import axios from 'axios';
class TodoList extends Component {
componentWillMount() {
var config = {
headers: {
"Access-Control-Al
浏览 0提问于2018-04-12得票数 0
回答已采纳
我正在学习如何使用React/NodeJS生成PDF的教程。PDF在我的文件中生成，但我得到了一个头错误，它阻止了GET请求的工作。 0]错误ERR_HTTP_HEADERS_SENT:发送到客户端后无法设置标头 代理运行得很好。我猜我还没有正确处理ajax请求。 节点 const express = require('express');
const router = express.Router();
const { check, validationResult } = require('express-validator/check');
const
浏览 11提问于2019-05-14得票数 0
回答已采纳
有时，我想隐藏url链接，同时使用GET或POST方法。每当我使用REACT_APP_时，我都会使用REACT_APP_隐藏url。我的问题是，如果我使用的是Next.js应用程序，我能用NEXT_PUBLIC_URL代替吗？这两个变量的工作原理相似吗？他们有什么不同？
React应用程序
axios.get(process.env.REACT_APP_URL)
下一个应用程序
axios.get(process.env.NEXT_PUBLIC_URL)
浏览 12提问于2022-03-01得票数 2
1回答
axios响应未填充
、、、
我正在制作在Youtube上搜索的react应用程序，并使用create-react-app显示一些视频列表。我的问题是来自axios.get()的响应文档只包含脚本和空的框架标记。我想这里面有一些内容，如当从浏览器打开。为什么会发生这种情况？我应该学些什么？
import React from "react";
import SearchBar from "./SearchBar";
import axios from "axios";
class App extends React.Component {
onSubmitFormSea
浏览 2提问于2020-05-28得票数 0
2回答
如何访问开放源码api
、、、
我使用的是react，在组件中我有一个按钮，单击它我正在运行API https://dog.ceo/api/breeds/list/all --这个按钮是从Dog.ceo获取所有种类的狗，但是每次我点击这个url它就会说网络错误，我现在完全厌倦了我的代码中缺少了什么。
import React, { Component } from 'react'
import axios from 'axios'
class Welcome extends Component {
clickBtn(){
axios.get(`https://d
浏览 6提问于2020-01-03得票数 0
我正在尝试使用Axios(这是我第一次使用Axios)调用react应用程序(TSX)的API，每次我运行应用程序时，方法都会更改为'OPTIONS‘，请求就会失效。我们将非常感谢您的帮助。共享我的代码很抱歉，出于安全原因，我隐藏了身份验证令牌。
代码
import React, { useState, useEffect } from 'react';
import axios from 'axios';
interface Brands {
BrandId: number;
Name: string;
}
const AUTH_TOKEN
浏览 1提问于2020-09-05得票数 0
我在heroku上启动了我的应用程序。而且，自从我所有的axios获得请求后，返回一个空的html。
axios.post(process.env.REACT_APP_baseServerurl + '/create/get-users')
axios.get(process.env.REACT_APP_baseServerurl + '/create/get-users')
我得到的答复总是空白的。
但是，如果我将相同的请求更改为post，则效果很好。
当我在本地主机上尝试get请求时，它可以正常工作。但是当我将它部署到heroku上时，它
浏览 11提问于2022-07-15得票数 -1
我希望使用用于vuejs2.x的pdfjs实现的库，以便执行以下操作
使用axios从oauth2受保护的端点下载PDF
使用vue-pdf库呈现PDF (八进制流)
而棘手的部分是
访问保护资源
呈现PDF，以八位流的形式出现。
目前在回购中没有任何例子来显示这些案例。
浏览 0提问于2018-04-14得票数 0
回答已采纳
1回答
我想打印一个pdf文件，它是从router.js的GET请求获得的。
router.get('/fetch-pdf',(req,res) => {
res.sendFile(`${__dirname}/result.pdf`)
})
我的反应成分就像
App.js
import React from 'react'
import axios from 'axios'
const App = () => {
handleClick() {
axios.get('/fetch-pdf').then((res
浏览 4提问于2020-09-12得票数 0
1回答
我正在学习ReactTs，我正在编写一个简单的两个组件的应用程序来上传文件，并通过另一个请求获取上传进度，但我无法从请求中接收进度数据。我认为useEffect从不执行axios get请求。如何多次执行get请求才能获得0-100的进度？谢谢你的帮忙!
主成分：
import axios from 'axios';
import React, { Fragment, useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux'
浏览 8提问于2021-05-13得票数 1
回答已采纳
3回答
我的微服务是使用spring-boot和spring security开发的，前端是在react-hooks上设计的。现在，当我使用axios.post方法向微服务发送一些数据时，它会发送CORS预检方法，即options方法，因为axios默认将content-type作为应用程序/json发送，而application.json会在任何其他请求之前将options请求发送到服务器。 我试着用不同的头和内容类型'application/x-www-form-urlencoded‘发送我的请求，我也在我的服务器端使用了@cross-origin(*)。 const config =
浏览 30提问于2019-08-27得票数 2
回答已采纳
我试图从一个对象在页面上显示API数据。
我试图在CamperList文件中显示来自camperlist.js变量的数据，但我遇到了麻烦。
我将从用于检索API的每个文件中粘贴代码。
下面是来自camperlist.js文件的代码：
import React from 'react';
import CamperListItem from './camper_list_item.js'
//This is where the data is being pulled from VVVV
const CamperList = (props) => {
浏览 2提问于2018-01-17得票数 1
我是react和spring的新手，试图在我的spring boot控制台上打印简单的状态数据，而不是做模型。 react代码:它工作正常，输出数据为："{"user":{"username":"foo"，"password":"bar"}}“。 import React, { Component } from "react";
import LoginBtn from "../Buttons/ActionButtons/LoginActionBtn";
import Us
浏览 8提问于2019-06-23得票数 0
1回答
我有一个api，它提供了一个带有pdf链接的json-object。 { pdf_link: 'http://localhost:3000/logs.pdf' } 当用户单击文件名时，我想在单独的浏览器选项卡中打开此pdf。 我尝试将url作为a标记中的href提供 <a href={response.pdf_link} target='_blank'>{FileName}</a> 但当我点击链接时，pdf正在下载，而不是在浏览器选项卡中打开。 我找到了this的博客帖子，并尝试了以下方法。 import axios from '
浏览 104提问于2020-07-14得票数 1
我有一个在我的http://localhost:8080上运行的spring-boot rest API。我正在React中构建一个前端，我想使用API，但有些东西不起作用。
我有这样的代码：
componentDidMount() {
axios.get('https://jsonplaceholder.typicode.com/users')
.then(res => {
console.log(res);
});
axios.get('http://localhost:8080/api/player')
浏览 3提问于2021-05-21得票数 1
我的前端和后端应用程序有问题。我有一个运行在前端的React.js应用程序和一个运行着React应用程序调用的Java Spring Boot应用程序。当它们都在我的本地主机上运行时，一切工作正常。我在localhost:3000上运行开发React应用程序，在localhost:8080上运行Spring Boot应用程序。我在控制器中放置了@CrossOrigin注释，这使得React应用程序能够调用Spring Boot应用程序。这一切都运行得很好。 但现在我想把这两个应用都部署到heroku上，让它们协同工作。因为它们是独立的存储库，所以我将它们分别部署到两个heroku应用程序中。
浏览 19提问于2020-12-31得票数 0
回答已采纳
我已经设置了一个具有React前端服务器的Express后端服务器。我还在Redux中设置了一个操作文件，以请求api服务器获取数据。下面是操作文件的样子：
import axios from 'axios';
import {REGISTER_SUCCESS,
REGISTER_FAIL,
USER_LOADED,
AUTH_ERROR,
LOGIN_SUCCESS,
LOGIN_FAIL} from './types';
import {setAlert} from './alert';
i
浏览 4提问于2020-03-05得票数 0
import axios from "axios"
export function App() {
const config = {
headers: { Authorization: `Bearer TOKEN` },
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET",
'Access-Control-Allow-Headers': '*',
浏览 11提问于2022-08-24得票数 -1
1回答
我在Reactjs中使用axios将用户的数据发送到php，然后用php创建一个新用户，但是当我想发送数据时，它会变为空，而我的php端会出现一些错误
我的反应密码
import React, { useReducer } from 'react';
import axios from 'axios';
import UserContext from './userContext';
import userReducer from './userReducer';
//Register user
const register
浏览 0提问于2019-08-28得票数 1
回答已采纳
我有一个反应前卫和Django后端。在我的前端，我想为后端获得的PDF提供一个视图。我尝试使用iframe和对象HTML标记，但由于缺少身份验证，它们失败了。我建议的方法是使用axios.get请求PDF，因为这会自动处理身份验证。然而，我无法找到如何处理获得的PDF，以防临时存储和显示它的反应。
目前，我的函数能够获得PDF并将其显示在一个新的窗口中，但我希望将它作为一个元素包含在当前页面中。
const getPDF = () => {
axios
.get(
`${process.env.REACT_APP_API}/Link/to/the/PDF/`,
{
浏览 9提问于2022-10-06得票数 1
回答已采纳
1回答
我正在尝试测试一个简单的组件。 在我的组件中，我使用useEffect调用fetchPdf函数。 在fetchPdf函数中，我发出axios请求，如果调用成功，我会将响应(即pdf)设置为状态。 我的组件： import React, { useState, useEffect } from "react";
import axios from 'axios';
export default function App() {
const [pdf, setPdf] = useState();
const fetchPdf = () => {
浏览 17提问于2020-12-16得票数 0
我试图保护API路由，这个API路由在不同页面的客户端和服务器端调用。
在test页面上，它返回401 error。
在test2页面上，它很好地返回内容。
我想当我在session中发送http请求时，它不会通过getServerSideProps。
我的问题是，如何保护客户端和服务器端使用的API路由？
/页/测试
import React from 'react';
import axios from 'axios';
import { getSession } from 'next-auth/react';
const Test = (
浏览 12提问于2022-02-24得票数 2
我试图从spring boot控制器获取数据，但是数据没有出现在前端ReactJS中。 Spring boot控制器在localhost中工作正常，数据也出现在localhost中。 Spring Boot控制器： package com.javaguidestutorials.reactspringboot.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotat
浏览 16提问于2021-01-30得票数 0
我才刚开始有反应。我成功地使用axios从http获取数据，并使用一个操作来推送数据。我可以在mapStateToProps输出数据，但它不会将数据设置为类中的prop。下面是我的代码，上面有关于数据可用性的注释。
import React from 'react';
import { connect } from 'react-redux';
import { fetchCountries } from '../../actions/actions';
import _ from 'lodash';
class TheClas
浏览 9提问于2017-07-03得票数 0
回答已采纳
我刚刚开始研究react&redux设计states+动作。目前我关注的是api调用。我创建了一个apimanager，这是我的请求：
axios.get('http://localhost:3000/0')
.then(response => {
store.dispatch(getDataSuccess(response.data));
return response;
}).catch(function (error) {
console.log('er
浏览 0提问于2016-10-11得票数 0
1回答
我正在尝试将Django后端连接到React前端，使用axios访问api端点。我使用curl测试了这个api，看看我是否收到了测试数据的json，这是很好的。我打开了端点，这样它就不需要身份验证了。但是我一直在我的javascript控制台中得到这个错误：
编辑:用于表示我正在运行api并在我的计算机上使用前端。
Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:87)
to测试组件来测试将后端提供给前端的测试。我想要控制台记录数据，但只捕
浏览 6提问于2018-05-30得票数 3
回答已采纳
1回答
我正在开发一个应用程序，在这个应用程序中，我有一个react前端和一个java spring后端。我有一个简单的API调用，在那里我想返回一个新地址。我已经通过使用单独的容器来执行curl命令docker container run --rm -it --net multichain-network byrnedo/alpine-curl http://multichain-api:8080/api/blockchain/address/create来验证这一点。此调用返回预期的结果。
现在，我已经使用docker-compose创建了我的对接环境，它们都已经启动并运行，并且可以相互切换。
v
浏览 0提问于2018-09-06得票数 2
回答已采纳
1回答
我使用来自React的axios和useEffect实现了一个Get请求，并且我试图访问weatherstack，但是，出现了一个错误，我检查了控制台是否重新登录 Object { code: 105, type: "https_access_restricted", info: "Access Restricted - Your current Subscription Plan does not support HTTPS Encryption." } 我有下面的代码，我检查过它是http，所以我不确定为什么会发生这种情况。我还碰巧看到它刷新了多次，大约5
浏览 9提问于2020-12-30得票数 1
1回答
我是新的反应，我正在开发一个非常简单的应用程序与MySQL数据库。在这里，我向DB提交评论，并将数据从DB返回到UI。点击提交按钮后，它不会在UI上显示更新的电影和评论列表。而且，道具不会改变。请帮助我理解我在这里做错了什么。此外，欢迎对代码进行任何改进。
App.js
import React, { useState, useEffect, Component } from 'react';
import './App.css';
import { addReview } from './actions/actionReview'
impor
浏览 0提问于2020-10-15得票数 1
我有view.js文件，其中我显示每个客户的id详细信息。我有带有MYSQL数据库的nodejs后端。我想下载这些细节作为pdf文件与下载按钮。
PS:我刚接触过reactjs和nodejs。
下面是我的view.js代码
import React, {useState, useEffect} from 'react';
import { useParams, Link } from 'react-router-dom';
import axios from 'axios';
import Moment from 'moment'
浏览 2提问于2022-05-19得票数 0
我是React的初学者。我有两种不同的使用React Hooks的情况，我无法正确地从本地API接收数据。 案例1： export const RegisterT = () => {
const [test, setTest] = useState()
const addrState = {}
axios.get('http://127.0.0.1:3333/states', { addrState })
.then(res => {
setTest(res.
浏览 16提问于2019-10-10得票数 0
回答已采纳
我在应用程序Nextjs中使用了axios，其中我使用了Youtube API，并且发生了以下错误
下面是代码
import React from "react";
import youtube from "./api";
import VideoList from "./VideoList";
class App extends React.Component {
state = {
videos: [],
};
componentDidMount() {
this.onTermSubmit("Car
浏览 4提问于2022-04-25得票数 1
我有一个带有@Controller的SpringBoot应用程序，它接受一个发送到localhost:8080/ getRequest的getRequest并返回JSON。我已经在浏览器中输入了这个域，并看到了返回的JSON。
但是，当我尝试使用Axios get请求从我的React应用程序(在本地运行)访问此url时，而不是返回JSON数据，它返回以下错误：
Network Error at createError (http://localhost:3000/static/js/bundle.js:1634:15) at XMLHttpRequest.handleError (http:/
浏览 0提问于2018-12-10得票数 2
4回答
我正在创建一个应用程序，在React JC中的前端，我有一个用Node JS制作的基本REST api。当我尝试从localhost:3001/user/:id获取数据时，例如在postman上-一切都工作100%。
但是，当我尝试在React中的前端获取它时( react应用程序托管在localhost:3000/上)，它提供了以下错误：
“无法加载本地主机:3001/user/5b21a5d7588b40be612798d4:只有以下协议方案才支持跨域请求: http、data、chrome、chrome-extension、https。”
我试图在我的前端获取数据的相关代码(使用Axi
浏览 84提问于2018-06-15得票数 5
回答已采纳
1回答
无法使用axios检索API数据
、、、、
我试图使用API构建一个简单的登录，但始终面临错误
import React from "react";
import { useState } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";
export default function Login() {
const navigate = useNavigate();
const [formData, setFormData] = u
浏览 6提问于2022-01-26得票数 0
我使用React，node.js，这是我第一次使用Axios连接到localhost:8080上的Java/SpringBoot服务(获取所有)，它以JSON数组的形式返回保存的用户列表。我试图实现的是成功地用Axios连接和检索其余的数据，但是我得到了以下错误：
Failed to compile
src\App.js
Line 16:7: 'setIsLoaded' is not defined no-undef
Line 17:7: 'setRowData' is not defined no-undef
Line 35:13:
浏览 1提问于2021-01-26得票数 1
回答已采纳
我正在尝试建立一个React项目，并想让一个基本的get call正常工作。我使用的url是https://jsonplaceholder.typicode.com/todos/1，只是为了测试和查看是否一切正常。但是，我得到了一个404错误。我打的电话是
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then(response => console.log(response))
.catch(error => console.log(error.response));
<sc
浏览 2提问于2018-10-30得票数 1
当尝试呈现我的应用程序接口数据以列出应用程序接口中的所有品牌时，控制台显示404错误“GET https://v1-sneakers.p.rapidapi.com/v1/sneakers/brands 404 (Not Found)”当我在不同的组件中使用此端点时，它起作用。但我决定让它成为自己的页面。我正在使用'useEffect‘来呈现api数据。我不确定这是我设置路由的方式，还是我获取数据的方式。 ? Brand.js import React, {useEffect, useState} from 'react';
import api from &#
浏览 139提问于2021-04-28得票数 0
1回答
我需要你的帮助。我有一个从REST中检索数据的组件，当响应返回时，我将启用PDF按钮。
const [pdf, setPDF] = useState(false);
const [utente, setUtente] = useState(null);
useEffect(() => {
const url = ""
axios.get(url, {
params: {
id: props.id
}
})
.then((response) => {
浏览 6提问于2020-04-21得票数 0
我想用GET方法调用一个api，并传递一些表单数据。但是axios似乎不支持GET的表单数据。有没有办法让我克服这个问题？
ps:我正在使用react查询和axios
浏览 18提问于2020-11-14得票数 0
1回答
我正在建立一个电影栅格，返回他们的Id，缩略图，标题，集号和发布日期。
如何在species.names的每个特定视图上显示对象值？
getSpecies()返回对象值，但如何在render方法中传递它们？
DetailFilms.js组件：
import React, { Component } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
class DetailFilms extends Component {
sta
浏览 0提问于2019-02-04得票数 0
2回答
在这段代码中，每当我试图指向/dashboard时，它都不会等待axios的响应，而是立即转到返回部件，它使用loggedin和它的默认值，这里是undefined。我想我应该用承诺但我不知道怎么..。所以如果有人能帮忙我会很感激的。
import axios from 'axios';
import React, { useEffect, useRef, useState } from 'react';
import { Redirect } from 'react-router';
import OverallCondition from &
浏览 8提问于2021-08-26得票数 0
我有一个React和Node应用程序，我有一个带有下载按钮的表格。当我单击download按钮时，它会向节点app发出一个请求，让它调用REST API在浏览器中下载一个zip文件。 我设法通过直接从React链接REST API url来下载zip文件，但是我的经理告诉我不要暴露API url并通过Node屏蔽它。 我尝试了在网上找到的不同方法，但都不起作用，只有一种方法下载了一个压缩文件，其中包含的文件可能包含文件的base64。 我想为React和Node如何从REST API下载的解决方案。 谢谢 React代码： $("#example tbody").on(&#
浏览 45提问于2021-11-08得票数 0
我们的react应用程序使用window.fetch方法对其大部分或所有区域的http调用进行处理。在此之前，它只有一个访问内容的令牌，我们所做的是，为每个请求添加一个标头，以发送令牌等等。下面是此类请求的示例代码：
useEffect(() => {
// GET S3 CREDANTIONS
fetch("/dashboard/de/question/s3credentials", {
method: "GET",
headers: {
"Content-Type": "a
浏览 5提问于2021-03-22得票数 3
回答已采纳
我成功地将一个json发布到后端。但是我对patch有个问题。我跟踪了，我也试过axios.patch()。没有错误的PATCH到达Django，但是没有数据。
Quesion:
我错过哪里了？
import axios from "axios/index";
import {takeEvery, call, put} from "redux-saga/effects";
import {getAuthToken, prepareJWTHeader} from "../../login/utils";
import {ROOT_URL, SELE
浏览 2提问于2017-12-22得票数 0
回答已采纳
我正在构建一个react应用程序(使用)，它从用django构建的服务器上获取和发布数据。我在react.js中使用axios请求。
它在开发模式下运行良好，但是当我构建react应用程序并部署到netlify时，请求url就会发生变化。在开发阶段，Chrome开发工具网络显示Request URL: https://xyz.herokuapp.com/abc/，但当我构建应用程序并部署到netlify时，它显示Request URL: https://loving-dijkstra-99eada.netlify.com/xyz.herokuapp.com/abc/和API调用失败。api调用
浏览 5提问于2019-11-25得票数 0
回答已采纳
3回答
我正在学习ReactJS的教程，我正在尝试创建Spring Boot和React Java Full Stack Application with Maven.
下面是我创建的文件：
App.js
import React, { Component } from "react";
import "./App.css";
import InstructorApp from "./component/InstructorApp";
class App extends Component {
render() {
return (
浏览 1提问于2020-02-21得票数 0
import React, { Component } from "react";
import axios from 'axios';
class App extends Component {
handleSubmit(event) {
axios.get('http://localhost:3050/login', {
"username": "username",
"password": "password"
})
浏览 2提问于2019-10-04得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
