如何在next.js/React.js typescript上下载pdf文件？

zvokhttg 于 2023-08-04 发布在 React

关注(0)|答案(2)|浏览(238)

这是我下载PDF文件的组件。我在Assets文件夹中有一个名为resumeroshan.pdf的PDF文件

"use client";
import resume from "../../Assets/resumeroshan.pdf";
export default function About() {
  return(
   <div>
    <a href={resume} download="roshan">
      <div className="mt-[25px] flex w-[150px] cursor-pointer justify-center rounded bg-[#007aff] px-5 py-3 align-middle text-white hover:border-[1px] hover:border-[#007aff] hover:bg-white hover:text-[#007aff]">
        Download CV
      </div>
    </a>
   </div>
  );
}

字符串
当我点击下载CV按钮什么也没发生，甚至在控制台也没有错误。
我还按照一些来源的一些说明在global.d.ts中添加了declare module '*.pdf'，但也没有帮助。
你能帮助我如何下载文件按钮点击在next. js/React.js。以上代码来自next.js

next.js

来源：https://stackoverflow.com/questions/76743888/how-to-download-pdf-file-on-next-js-react-js-typescript

2条答案

按热度按时间

s1ag04yj1#

无法以您尝试的方式导入和下载.pdf文件。
你应该把你想下载的文件放在public文件夹中。然后使用以下

<a href="/resume.pdf" download="roshan.pdf">
  <div className="mt-[25px] flex w-[150px] cursor-pointer justify-center rounded bg-[#007aff] px-5 py-3 align-middle text-white hover:border-[1px] hover:border-[#007aff] hover:bg-white hover:text-[#007aff]">
    Download CV
  </div>
</a>

字符串

赞(0）回复(0）举报 2023-08-04

4bbkushb2#

对于NextJs 13，将您的pdf文件放在公共目录（比如rohsan-resume.pdf）中，然后像这样使用它

<a href="rohsan-resume.pdf" download>
      <div className="mt-[25px] flex w-[150px] cursor-pointer justify-center rounded bg-[#007aff] px-5 py-3 align-middle text-white hover:border-[1px] hover:border-[#007aff] hover:bg-white hover:text-[#007aff]">
        Download CV
      </div>
    </a>

字符串
链接到vercel讨论link to pdf

赞(0）回复(0）举报 2023-08-04

我来回答

如何在next.js/React.js typescript上下载pdf文件？

2条答案

相关问题

热门标签

最新问答