根據瀏覽器語言下載不同的文件

Question

如何根據 HTML 中的 lang 屬性下載不同的文件？

目前，我的代碼如下所示：

import { useTranslation } from "react-i18next";

import ENCV from "../assets/englishCV.pdf";
import PTCV from "../assets/portugueseCV.pdf";

const CTA = () => {
    const { t } = useTranslation();

    const onDownloadCV = () => {
        if(document.getElementsByTagName("html")[0].getAttribute("lang") === "pt") {      
        }
    };

    return(
        <div className="cta">
            <a href={} download className="btn">{t("downloadCV")}</a>
            <a href="#contact" className="btn btn-primary">{t("contactButton")}</a>
        </div>
    );
};

export default CTA;

Answer 1

重命名為包含 lang 屬性的內容。

例如“cv_pt”或“cv_en”。

然后就可以得到帶有 lang 屬性的目標文件了。

const onDownloadCV = async () => {
  const lang = document.getElementsByTagName("html")[0].getAttribute("lang");
  const targetCV = await require(`../assets/cv_${lang}.pdf`);
  ... ... ...
};

Answer 2

由於您使用的是i18next ，因此最好直接從i18next而不是 DOM 獲取當前語言：

import i18next from "i18next";

// inside component:
const lang = i18next.language;
// lang will be string such as: "en", "fr", ...
// now you can use it to specify the relevant language file.
...