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

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 查询，方法是为每个文件创建一个节点。下一步是在您的组件/页面中查询它：

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

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

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

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