vue项目中下载静态资源里的pdf文件

这篇具有很好参考价值的文章主要介绍了vue项目中下载静态资源里的pdf文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.把文件放在项目目录src/assets文件下

vue项目中下载静态资源里的pdf文件,pdf

2.在项目是用a标签下载

        <a
          :href="require('@/assets/download.pdf')"
          download="使用说明.pdf"
          target="_blank"
        >
          <img src="@/assets/banner.png" class="bannerimg"
        /></a>

以上项目运行会报错

Failed to compile.
./src/assets/download.pdf 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)

3.需要在vue.config.js中配置!!!

vue项目中下载静态资源里的pdf文件,pdf

具体配置代码:
 文章来源地址https://www.toymoban.com/news/detail-828929.html

 configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    module: {
      rules: [{
        test: /\.pdf$/,
        use: [{
          loader: 'url-loader',
          options: {
            name: 'files/[name].[ext]'
          }
        }]
      }]
    }
  },

到了这里,关于vue项目中下载静态资源里的pdf文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • SpringBoot 读取项目中静态资源文件

    PathMatchingResourcePatternResolver是一个 Ant模式通配符 的Resource查找器,可以用来查找类路径下或者文件系统中的资源。 ❗❗❗在SpringBoot中尽量 避免使用 ResourceUtils读取资源文件。 ResourceUtils.getFile() 获取的是资源文件的绝对路径,当项目打包为jar或者war包之后部署,资源文件的绝对

    2024年02月07日
    浏览(39)
  • Flask项目打包为exe(附带项目资源,静态文件)

    运行以下命令来使用 PyInstaller 根据 my_app.spec 文件打包flask应用程序:

    2024年02月14日
    浏览(24)
  • vue项目 前端加前缀(包括页面及静态资源)

    具体步骤 (1)更改router模式,添加前缀 位置:router文件夹下面的index.js (2)实现静态文件加前缀 位置:vue.config.js 静态资源css,js之类的的src或href引用位置会加上这个前缀,会体现在打包后的index.html文件内容 例如 (3)nignx配置

    2024年02月04日
    浏览(43)
  • vue项目打包,解决静态资源无法加载和路由加载无效(404)问题

    打包后的项目静态资源无法使用,导致页面空白 静态资源无法使用,那就说明项目打包后,图片和其他静态资源文件相对路径不对,此时找到config里面的index.js,在build模块下加入 assetsPublicPath: \\\'./\\\',  如下图所示,或者是在打包完的dist文件夹中找里面的.js文件,将其中的\\\'/\\\'替

    2024年02月08日
    浏览(42)
  • Flask Web API构建实例:GET、POST文件上传、静态资源下载一网打尽

      以下是一个通过 Flask 构建 Web API 服务的详细示例,包含了各类请求(GET、POST、文件上传、静态资源下载)、每个方法独立配置路由、参数接收和解析、请求日志记录以及异常日志记录。请确保你已经安装了 Flask,你可以使用以下命令进行安装: 接下来是一个包含详细注释

    2024年02月04日
    浏览(44)
  • vue 项目中实现pdf预览 pdf打印 pdf下载

    在Vue项目中实现PDF预览、打印和下载可以通过以下步骤来实现: 安装pdf.js pdf.js是一个JavaScript库,可以用于在Web上渲染PDF文件。 可以使用npm安装pdf.js,命令如下: npm install pdfjs-dist --save 创建一个PDF组件 在Vue项目中,可以创建一个PDF组件,用于显示PDF文件。 可以使用pdf.js提供

    2024年02月13日
    浏览(50)
  • Vue中引入HTML静态资源文件(包含数据的传递)(html大屏)

    项目需要做一个可视化大屏,要的时间比较急,在查找大屏模板的时候找到了合适的一个静态的HTML+JS+CSS的一个模板,但是这个模板没有数据请求等工具方法,于是现在想要把这个html文件放在vue项目中,并且通过vue获取数据,把数据传到html页面,在页面内展示数据。 首先,

    2023年04月26日
    浏览(22)
  • 怎么快速卸载Vue项目里的node_modules文件夹

            因为平时装依赖的时候,有可能会报错怎么不管用的时候,就需要把node_modules文件夹删了重新intall一下,但是直接删的话会要管理员权限,或者各种问题,这个时候就可以使用一个工具来解决 rimraf         用 rimraf 来卸载的话还是非常快的,亲测比直接shift+Dele

    2024年02月11日
    浏览(42)
  • vue 纯前端预览pdf,纯前端实现pdf加水印下载文件也带水印,防止pdf下载

      原理:主要是利用pdfh5这个插件来完成的   使用方法:   1.页面需要有一个容器例子:div id=\\\"demo\\\"/div   2.下载pdfh5插件 npm install pdfh5   (注意:webpack5之后不会下载polyfill 需要手动下载 所以引入pdfh5的时候会报错)   解决方案:下载 node-polyfill-webpack-plugin npm install node-polyfill-

    2024年04月15日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包