从Vue CLI项目文件夹下载.pdf文件

库斯纳

我正在尝试简单地.pdf从Vue组件中下载文件。它适用于例如.jpg或.png文件，但不适用于.pdf文件。

这是我的vue.config.js

module.exports = {
  chainWebpack: config => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .loader("vue-loader")
      .tap(options => {
        // modify the options...
        return options;
      });

    config.module
      .rule("pdf")
      .test(/\.pdf$/)
      .use("file-loader")
      .loader("file-loader");
  }
}

在简化的Vue组件中，我尝试下载这样的文件（适用于.jpg）

   <template>
     <div>
       <a :href="pdfLink" download="myPdf.pdf">Download</a>
     </div>
   </template>


 <script>
    name: "PdfFileComponent",
    data: () => ({
    pdfLink: require("../assets/myPdf.pdf")
  })
 </script>

任何帮助表示赞赏！

库斯纳

我对它的规则做了一些修改， vue.config.js

module.exports = {
  configureWebpack: {
    rules: [
      {
        test: /\.(pdf)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: 'files/[name].[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  }
}

希望这对遇到同样问题的人有所帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。