盖茨比 - 下载的文件总是损坏

Question

我正在尝试在我的关于页面上添加一个简历按钮，用户可以在其中下载我的简历。

我已经创建了一个静态文件夹，正如文档在根目录中所说的那样 (src/static/myresume.pdf)，然后我有一个 href 这样的：

<a href={`myresume.pdf`} download className="btn about-resume-button">Download my CV</a>

文件下载正确，但是当试图打开它时，它总是损坏。我尝试了 doc、docx 和 pdf 以及所有相同的问题。

我目前在本地主机上运行，但它应该仍然有效。

有什么突出的错误吗？

我还从文档中看到，您可以使用 gatsby-source-filesystem 在 GraphQL 中查询文件，但我还不知道该怎么做。

非常感谢任何帮助！

谢谢

Answer 1

您的静态文件夹结构有误。它应该在您的根文件夹中（与 /src 相同级别），而不是在 /src 中。一个理想的结构应该是这样的：

/
|-- /.cache
|-- /plugins
|-- /public
|-- /src
    |-- /pages
    |-- /templates
    |-- html.js
|-- /static
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js

注：更多详情见Gatsby Project structure。

修复此结构错误您的代码将正常工作，因为您的 href 指向正确的 URL.

但是，Importing Assets Directly into Files documentation 中提到和显示的方法将优化您的代码，因为它会使 PDF 属于 Gatsby 环境。

要使用 Gatsby 文件系统，您需要引用该文件并给它们一个 sourceInstanceName。在你的 gatsby-config.js:

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `pdf`,
    path: `${__dirname}/src/pdf/`,
  },
},

注意：此示例假定您的 PDF 将位于 /src/pdf 文件夹下。此外，您可以在 their documentation.

中找到有关 gatsby-source-filesystem 的更多信息

这将使您的 /src/pdf 文件夹可供通过 GraphQL 查询，方法是为每个文件创建一个节点。下一步是在 component/page:

中查询它

import React from "react"
import { useStaticQuery, graphql } from "gatsby"

import Layout from "../components/layout"

const DownloadsPage = () => {
  const data = useStaticQuery(graphql`
    {
      allFile(filter: { sourceInstanceName: { eq: "pdf" } }) {
        edges {
          node {
            publicURL
            name
          }
        }
      }
    }
  `)
  return (
    <Layout>
      <h1>All PDF Downloads</h1>
      <ul>
        {data.allFile.edges.map((file, index) => {
          return (
            <li key={`pdf-${index}`}>
              <a href={file.node.publicURL} download>
                {file.node.name}
              </a>
            </li>
          )
        })}
      </ul>
    </Layout>
  )
}
export default DownloadsPage

基本上使用上面的代码片段，您将检索所有 sourceInstanceName 匹配“pdf”的文件并循环遍历它们。查询 File 节点的 publicURL 字段将提供 URL，您可以在 JavaScript 组件、页面和模板中使用。

如果您只有一份简历，您可以省略循环并直接指向您的简历：

      <div>
        <a href={data.allFile.edges[0].file.node.publicURL}>{data.allFile.edges[0].file.node.name}</a>
      </div>

盖茨比 - 下载的文件总是损坏

Gatsby - Downloaded file is always corrupt

reactjs

file

gatsby

graphql-js