我知道“window”或“document”对象在组件挂载之前在React组件中是不可识别的。
我正试图做一个下载按钮,从后端服务器接收处理过的Excel文件。在我使用React之前,我曾经这样实现。..
<button onclick="download()">Download</button>
<script>
function download() {
const URL = 'http://dynamic-link.com/sample.xlsx'
window.location.href = URL
}
</script>
然而,在Next。js或React,窗口对象无法识别,所以我不得不用另一种方式。下载URL是动态的,所以我不会使用下一个。config.js
页/索引。土耳其电信公司
//...
const handleDownloadExcel = () => {
router.push('/download')
}
//...
return(
//...
<button onClick={() => handleDownloadExcel()}>Download!</button>
//...
pages/download.土耳其电信公司
import { useEffect } from 'react'
import { useRouter } from 'next/router'
const DownloadPage = () => {
const router = useRouter();
useEffect(() => {
//I will pass this URL variable by props later on.
const URL = 'http://dynamic-url.com/sample.xlsx'
window.location.href = URL;
router.push('/')
}, [])
return (
<>
</>
)
}
export default DownloadPage;
现在我设法从服务器下载了一个文件,但它似乎不正确。还有别的办法吗?
3条答案
按热度按时间rmbxnbpk1#
你可以在next js中使用window对象,如下所示:
ozxc1zmp2#
使用文件保护程序包下载我们的文件。
要安装它,请运行:
然后我们可以通过以下方式从包中调用saveAs函数:
第一个参数是要下载的URL,第二个参数是下载文件的文件名。
7xzttuei3#
谢谢上面的剧本。它解决了问题。我还发现,在NextJS中,将文件复制到/public/download/可以防止- HEAD https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf net::ERR_FAILED 200错误。
以及改变”的例子。pdf”到预期的文件名防止下载的文件被命名为“download”。pdf”默认情况下。