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

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

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

html 复制代码
        <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中配置!!!

具体配置代码:

javascript 复制代码
 configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    module: {
      rules: [{
        test: /\.pdf$/,
        use: [{
          loader: 'url-loader',
          options: {
            name: 'files/[name].[ext]'
          }
        }]
      }]
    }
  },
相关推荐
huaweichenai5 天前
spring boot操作PDF
java·spring boot·pdf
开开心心就好5 天前
批量提取PDF中的图片,直接导出原图
前端·javascript·支持向量机·智能手机·pdf·html·启发式算法
泡海椒6 天前
PDF 表格样式优化:jquick-pdf 边框、圆角、背景色
java·开发语言·pdf
泡海椒7 天前
jquick-pdf 表格实战:动态数据 PDF 报表生成
java·开发语言·pdf
泡海椒7 天前
jquick-pdf 表格行列尺寸控制实战:单元格合并的可行边界
java·开发语言·pdf
java_logo7 天前
Docker 部署 Gotenberg 完整教程:Compose 搭建文档转 PDF API
docker·pdf·chromium·libreoffice·文档转换·轩辕镜像·gotenberg
泡海椒8 天前
jquick-pdf 防止 PDF 内容分页断裂:keepTogether 属性妙用
java·开发语言·pdf
泡海椒8 天前
jquick-pdf 文本元素实战:段落、行内文本、制表符用法详解
java·开发语言·pdf
SamChan909 天前
Python 处理小语种 PDF 的编码坑:重音字符、连字与 (cid:xx) 乱码的解决方案
python·ai·pdf·机器翻译
微咣科技9 天前
平台化工业AI再突破|大捷智能携手岚图汽车,打造车身焊装智能设计行业标杆
pdf·音视频