链接到Remix中的静态资产(PDF)

Question

我想在组件中添加一个链接，指向应用程序代码库中的PDF文档：

const SomeComponent = () => {
...
return <a href="../../shared-assets/some-pdf.pdf">Download</a>
}

我已经将它添加到public文件夹中，并在项目根目录中的自定义文件夹(shared-assets(中进行了尝试。这两次都没有找到文件——可能是因为这个文件的路由不存在(不确定我会如何设置(。

我也试着像导入图像一样导入它，但这在终端中引发了一个错误"；没有为".pdf"文件配置加载程序；。

import somePdf from '../../shared-assets/some-pdf.pdf';
...
<a href={somePdf}>Download</a>

那么我该怎么做呢？

Answer 1

静态内容应存储在中/公用文件夹。

所以/公共/共享资产/some-pdf.pdf

链路将是<a href="/shared-assets/some-pdf.pdf">Download</a>

中的文件/public相对于根/URL。

至于导入文件，只处理此处列出的文件扩展名。不幸的是，PDF不是其中之一。

Answer 2

我最终添加了一个资源路由文件$filename[.pdf].tsx，其中的内容是：

import { readFileSync } from 'fs'
import sanitize from 'sanitize-filename'
const getFileContents = (filename: string) => readFileSync(`./public/shared-assets/${sanitize(filename)}.pdf`)
type ParamsType = {
filename: string
}
export async function loader({ params }: { params: ParamsType }) {
const { filename } = params
const pdf = getFileContents(filename)
return new Response(pdf, {
status: 200,
headers: {
'Content-Type': 'application/pdf',
},
})
}