编译模块解析失败：导入或访问docx文件reactjs时出现意外字符

Question

我希望有一个按钮，该按钮将在单击时下载docx文件，该文件是静态文件，在我尝试过但没有运气之后，该文件位于images / downloads目录中。

首先，尝试-

 <a href={require("../../images/downloads/Gate-Pass-Moving-in.docx")}
    className="btn btn-sm btn-secondary"
    download >
     Download
 </a>

第二次尝试-

import moveIn from "../../images/downloads/Gate-Pass-Moving-in.docx";

-然后在按钮中-

 <a href={moveIn}
    className="btn btn-sm btn-secondary"
    download >
     Download
 </a>

在接下来的两次尝试中我都遇到相同的错误。 注意-我将next与react

一起使用

Answer 1

您可以使用文件的绝对路径。

<a href="../../images/downloads/Gate-Pass-Moving-in.docx"
    className="btn btn-sm btn-secondary"
    download >
     Download
 </a>

Answer 2

您不能将.docx文件导入到Reactjs代码中，不是第一次尝试导入的js文件或jsx文件 但是你可以设置链接 或者您可以使用此软件包 downloadbutton

    // @demobox
function makeFile() {
  // do some calculations
  return {
    mime: 'text/plain',
    filename: '../../images/downloads/Gate-Pass-Moving-in.docx',
    contents: 'all of the exports',
  }
}


<DownloadButton
  // these classes come from materializecss
  className='waves-effect waves-light btn' 
  genFile={makeFile}/> 

另一种替代方法是使用the Javascript File Download软件包

var fileDownload = require('js-file-download');
fileDownload(data, '../../images/downloads/Gate-Pass-Moving-in.docx');