`Vuejs not displaying pdf file correctly`

I am currently using the Laravel DomPDF wrapper to generate PDF files. However, I am facing an issue where I want to render these generated PDF files with my client-side Vue.js app. I have written code that allows me to view and download the PDF file, but my requirement is to open it in another tab instead.

 const url = window.URL.createObjectURL(new Blob([response]));
 const link = document.createElement('a');
 link.href = url;
 link.setAttribute('download', 'test.pdf');
 document.body.appendChild(link);
 link.click();

Is there anyone who can assist me with achieving this task?

javascriptlaravelvue.jsdompdf

Answer №1

I have discovered a method to open content in a new window. This could be beneficial for individuals using dompdf wrapper to generate PDFs.

const pdfUrl = window.URL.createObjectURL(new Blob([res]));
const linkToPdf = document.createElement('a');
linkToPdf.href = pdfUrl;
linkToPdf.setAttribute('href', 'invoice.pdf');
linkToPdf.setAttribute('target', '_blank');
document.body.appendChild(linkToPdf);
linkToPdf.click();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using ng-pattern to validate that a text field does not conclude with a particular term

In this code snippet, I am attempting to prevent a textfield from ending with any of the specified letters in the $scope.pointPattern variable. $scope.pointPattern = /^(?!.*ess|ence|sports|riding?$)/; $scope.error = "not valid"; Upon executio ...

javascriptangularjsregex

Vue.js is experiencing difficulties in rendering the project

After trying to install a Vue.js package, I encountered errors which prompted me to remove it. However, even after removal, I am still facing difficulties serving my project. Here is the log for reference: Click here ...

vue.jsnpmserve

Maintain the tab order for elements even when they are hidden

Check out this demonstration: http://jsfiddle.net/gLq2b/ <input value="0" /> <input id="test" value="1" /> <input value="2" /> By pressing the TAB key, it will cycle through the inputs in order. If an input is hidden when focused, press ...

javascriptjqueryhtml

The useStyles function does not automatically update properties in response to changes in variables

I have encountered an issue where the style of a component is not changing based on a boolean state change until I refresh the page. Here's what I'm doing: Within my parent App component, I have the following code: import React from "react"; imp ...

javascriptreactjsmaterial-ui

Shorten a data point in JSON code

I'm currently in the process of developing a stock widget that utilizes JSON to retrieve data from the Yahoo API/YQL console. I am specifically working with values extracted from the key ChangePercentRealtime, however, the values are longer than what ...

javascriptjqueryhtmljson

Is there a way for me to come back after all child http requests have finished within a parent http request?

I am currently utilizing an API that provides detailed information on kills in a game. The initial endpoint returns an ID for the kill event, followed by a second endpoint to retrieve the names of both the killer and the killed player. Due to the structur ...

javascriptasynchronous

What Are the Possible Use Cases for Template Engine in Angular 2?

For the development of a large single page application (SPA) with Angular 2.0, I have decided to utilize a template engine like JADE/PUG in order to enhance clarity and clean up the code. My goal is to achieve optimal performance for the application. Th ...

javascriptangularjsangularpugtemplate-engine

I am encountering an issue with a JS addition operator while working with node.js and fs library

I'm trying to modify my code so that when it adds 1 to certain numbers, the result is always double the original number. For example, adding 1 to 1 should give me 11, not 2. fs.readFile(`${dir}/warns/${mentioned.id}.txt`, 'utf8', ...

javascriptnode.js

An unexpected problem with text redirection that should not be happening

I am facing an issue with my HTML text field and post button on my website. Whenever I click the post button to make a post, it redirects to a separate PHP file called post.php which handles PHP and MySQL code for posting. However, I want to avoid this red ...

javascriptphphtml

Adjusting the array of buttons with various functions within the Header component

I am looking to create a customizable Header component with different sets of buttons that trigger various functions. For example, on the home page, the buttons could be "visit about page" and "trigger vuex action A", while on the about page they could be ...

javascriptvue.jsvue-componentvuexvue-router

AngularJs - $watch feature is only functional when Chrome Developer Tools are active

My goal is to create a $watch function within a directive that monitors changes in the height and width of an element. This will allow the element to be centered on top of an image using the height and width values. Below is my app.js code: app.directive ...

javascriptjqueryhtmlcssangularjs

Error encountered: TypeError: __webpack_require__.t is not a function - Issue appears only on live server, while localhost runs without any problem

I set up an e-commerce site that runs smoothly on localhost. However, when I deploy it to a live server, an error appears. Interestingly, the error disappears after reloading the page. Here is the code snippet: import React, { useEffect, useState } from & ...

javascriptreactjsnext.js

What is the best approach in VueJS to implement a skeleton loader and an empty page condition for my orders page simultaneously?

I have implemented a skeleton loader to display while the data is loading. However, I want to also show an empty order page if there is no data or orders coming in. I am trying to figure out the conditions for both scenarios - displaying the loader and t ...

javascriptvue.jswebvuejs2

Switch up the side navigation panel display

Hello, I am a newcomer to bootstrap and I have successfully implemented a collapsing navbar. However, I am looking for a way to make the navbar slide out from the right side when clicked on in mobile view. Can someone provide me with some JavaScript or j ...

javascriptjquerybootstrap-4

Steps for opening a modal in a react native application when a button is clicked

Exploring the realm of react native, I face a challenge in triggering a modal on button click. I've attempted to implement the following code snippet to achieve this goal:- openHeaderModal = () => { <ModalDropdown options={["H1", "H ...

javascriptreactjsreact-nativeonclickmodal-dialog

emulating the behavior of a synchronous XmlHttpRequest

While I have taken the time to explore similar questions like Pattern for wrapping an Asynchronous JavaScript function to make it synchronous & Make async event synchronous in JavaScript, I want to ensure that I consider all potential solutions. Is it ...

javascriptajaxsettimeoutsynchronoussetinterval

Issue with sending multiple files using FormData and axios in Vuex with Laravel. Server side consistently receiving null. Need help troubleshooting the problem

After trying the solution from my previous question Vuex + Laravel. Why axios sends any values but only not that one, which come's with method's parameter?, I realized that it only works when passing a single argument in axios. I managed to succe ...

javascriptlaravelvue.jsaxiosvuex

Delightful Popup for Successful Woocommerce Additions

I have created a plugin that transforms Wordpress Woocommerce variations into a table layout. I made significant changes to the code and now I'm attempting to integrate Sweet Alerts 2 in place of the current alerts displayed when a user adds a product ...

javascriptjqueryajaxwordpresssweetalert

Experiencing a lack of information when trying to retrieve data through an http request in an express/react

Issue: My problem lies in attempting to retrieve data from http://localhost:3000/auth/sendUserData using the http protocol. Unfortunately, I am not receiving any data or response, as indicated by the absence of console logs. Tools at my disposal: The te ...

javascriptnode.jsreactjshttpnext.js

A stateless component in React must always return a valid React element or null

I am a beginner with ReactJS and I am facing an issue. My goal is to showcase Hello world using the code snippet provided below, however, I keep encountering this error message: Can someone guide me on what I might be overlooking? The following is the c ...

javascripthtmlreactjsecmascript-6jsx