vue中使用window.open打开assets文件夹下的pdf文件

Stitch_xiao2023-09-03 12:12

需求：系统有个操作手册，点击会在浏览器新开个窗口并打开pdf文件。这个pdf文件存储在本地assets文件夹中。

文件结构：

注：直接使用window.open(文件路径)不能打开，需要在vue.config.js中配置所需文件

引入图中红框中的代码

javascript 复制代码

const webpack = require('webpack')

javascript 复制代码

        plugins: [
            // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
            new CompressionPlugin({
                cache: false, // 不启用文件缓存
                test: /\.(js|css|html)?$/i, // 压缩文件格式
                filename: '[path].gz[query]', // 压缩后的文件名
                algorithm: 'gzip', // 使用gzip压缩
                minRatio: 0.8 // 压缩率小于1才会压缩
            }),
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "windows.jQuery": "jquery"
            }),

        ],
        module: {
            rules: [{
                test: /\.pdf$/,
                use: [{

                    loader: 'url-loader',
                    options: {
                        limit: 2,
                        name: 'files/[name].[ext]'
                    }
                }]
            }]
        }

页面中打开：（我是在初始化的时候就打开文件，没用按钮）

javascript 复制代码

mounted(){
    window.open(require('../../../../assets/xxx.pdf'))
}