0


vue-直接打开本地文件下的pdf文件

背景:需求要求点击一个按钮可以打开pdf文件,这个文件是存储在本地的,如果直接写window.open()是无法打开的,尝试了多种方法后终于找到了一种方法能实现,记录一下。

介绍:url-loader是一个用于将文件转换为 base64 URI 的 webpack 加载器,作用是项目打包时,可以将符合条件的图片打包成base64 URL,减少http资源请求

注:在使用url-loader时,需要下载file-loader,因为url-loader的使用依赖于file-loader

vue.config.js配置:

const path = require('path');
const glob = require('glob');
// 打包时添加时间戳,区别版本
const Version = new Date().getTime();

module.exports = {
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
  },
  configureWebpack: {
    resolve: {
        alias: {
          // 设置@/的意义
          '@': path.resolve(__dirname, 'src')
        }
    },
  },
  chainWebpack(config) {
    config.module.rule("pdf")
    .test(/\.pdf$/)
    .use("url-loader")
    .loader("url-loader").options({
      limit: 2,
      name: 'files/[name].[ext]'
    })
  },
}

pdf文件存放的相对路径:xx-portal\src\assets\如何获取企微群组机器人地址.pdf

项目打包后的相对路径:xx-portal\dist\files\如何获取企微群组机器人地址.pdf,

openPdf() {
    window.open(require('../../assets/如何获取企微群组机器人地址.pdf'))
},

require()是为了得到pdf的路径,并同时把文件放到打包文件夹里,原理是使用fs.readFile同步读取文件中的内容做相对应的解析,默认只支持js和json文件类型,导入其他的文件类型就无法识别了。但是有了loader,在配置中读取到.pdf结尾要用file-loader来处理,那就会把require()通过特定的语法解析为一个路径。


对配置这块不太了解,写的不对或者不全面的欢迎各位大佬指导,虚心求教~

标签: 前端 pdf

本文转载自: https://blog.csdn.net/xxuxioxx/article/details/129534695
版权归原作者 西瓜有点饿 所有, 如有侵权,请联系我们删除。

“vue-直接打开本地文件下的pdf文件”的评论:

还没有评论