vue-直接打开本地文件下的pdf文件-Toy模板网

这篇具有很好参考价值的文章主要介绍了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()通过特定的语法解析为一个路径。

对配置这块不太了解，写的不对或者不全面的欢迎各位大佬指导，虚心求教~文章来源地址https://www.toymoban.com/news/detail-465277.html

到了这里，关于vue-直接打开本地文件下的pdf文件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！