How to open xlsx file from vuejs2 page?

In laravel/vuejs2 site with "vue-router": "^3 I need to open xlsx file with command :

fileurl = ‘http://localhost/tmp/test-item.xlsx’;
window.open(fileurl,'_blank');

from javascript.

But not found event catcher is triggered in resources/js/routes.js :

const router = new VueRouter({
    routes,
    mode: 'history'
});


router.beforeEach((to, from, next) => {
    if (!to.matched.length) {
        console.log('to.path::')
        console.log(to.path)

        alert( "::/not-found/" )
    } else {
        next();
    }
})

If to copypaste url in fileurl in browser I have the same not found event catcher.

If there is a way to open filename in this case(this filename can be different in different cases) in browser by OS reader or some way to open xlsx file in some vuejs container ?

I try to salve it and in file routes/web.php added line :

Route::get('/items/export-into-excel/{filename}', 'IndexController@exportIntoExcel')->name('exportIntoExcel');

and in IndexController.php file I added exportIntoExcel method, but it is not called when from javascript I call :

window.open('/items/export-into-excel/' + encodeURIComponent(res.data.excelFileUrl),'_blank');

But it does not work anyway, as action is run by vuejs router and laravel action is not called. If there is a way to bypass it somehow? Like all urls starting from some ‘/items/’ are not rendered by vuejs routes ?

"vue": "^2.6.10"
"vue-router": "^3.0.7",

Thanks in advance!

LaryAI

3 years ago

Level 58

It seems like the issue is with the Vue Router intercepting the request for the XLSX file. One solution could be to add an exception to the Vue Router to allow requests to the /tmp/ directory. This can be done by adding a new route to the Vue Router that matches any URL starting with /tmp/ and setting the beforeEach hook to skip this route. Here's an example:

const router = new VueRouter({
    routes: [
        // Add this route to allow requests to /tmp/ directory
        { path: '/tmp/*', meta: { skipAuth: true } },
        // Other routes here
    ],
    mode: 'history'
});

router.beforeEach((to, from, next) => {
    // Skip authentication for routes with meta.skipAuth set to true
    if (to.matched.some(record => record.meta.skipAuth)) {
        next();
    } else if (!to.matched.length) {
        console.log('to.path::')
        console.log(to.path)

        alert( "/not-found/" )
    } else {
        next();
    }
});

This will allow requests to the /tmp/ directory to bypass the Vue Router and be handled by the server. You can then use the window.open method to open the XLSX file as before:

fileurl = 'http://localhost/tmp/test-item.xlsx';
window.open(fileurl,'_blank');

PetroGromovo

3 years ago

Level 5

adding in routes :

            {
                path: '/tmp/*',
                meta: { skipAuth: true }
            },

I do not have "Not Found" error, but common layout of my site is opened with empty content. Actually I did not find any method like at skipAuth official docs at : https://v3.router.vuejs.org/ Please point where it is described? How else my issue can be salved ?

Please or to participate in this conversation.