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

Posted 2023-03-08

【中文标题】盖茨比 - 下载的文件总是损坏

【英文标题】：Gatsby - Downloaded file is always corrupt

【发布时间】：2020-12-24 14:35:48

【问题描述】：

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

按照文档在根目录 (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 中查询文件，但我还不知道该怎么做。

任何帮助将不胜感激！

谢谢

【参考方案1】：

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

/
|-- /.cache
|-- /plugins
|-- /public
|-- /src
    |-- /pages
    |-- /templates
    |-- html.js
|-- /static
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-s-s-r.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>

【讨论】：

那是完美的费兰！将静态文件夹移至根目录有效。所以建议使用 gatsby-source-filesystem 即使只有 1 个文件？

也许一个文件不值得。

Ferran 我做到了，而且很成功。不过我有一个问题，在我的配置中，我已经有了另一个类似的解析（名称：images，路径：$__dirname/src/images，）您是合并它们还是为pdf创建一个新的？

这是个人选择。我通常按​​类型（pdf、图像、svg 等）对文件系统的文件进行分组。正如您在文档中看到的那样，您可以拥有多个文件系统（并且应该）来保持代码的凝聚力并改进您的查询。