issue with vue-html2pdf when using Persian language

Is there a solution for handling Persian language issues in vue-html2pdf? Or is there another module that can convert VUE to PDF without any problems with RTL language support?

Answer №1

Vue.js

To address the issue, make sure to include a 'p' tag within the 'pdf-content' slot in your scripts. Additionally, apply the styles 'text-align: right' and 'float: right' to resolve the problem.
<section slot='pdf-content' class='p-5 m-3'>
   <p id='PDFFulltext' style='text-align: right; float: right'></p>
</section>
<b-button @click='generateReport()'>export</b-button>
<b-button @click='placeText()'>btn</b-button>
methods: {
        placeText() {
          var full_text = `<p>متن فارسی یا عربی</p>`;
          document.getElementById('PDFFulltext').innerHTML = full_text;
        },
        generateReport() {
          this.$refs.html2Pdf.generatePdf();
        },
}

Answer №2

When creating PDFs in Persian using the "html2pdf.js" module in Vue, I encountered a problem that turned out to be caused by a CSS issue within my project's CSS framework. Upon closer inspection, I discovered that the culprit was the "word-wrap" property. By changing it to "word-wrap: initial;" in the specific area I needed for the PDF, the issue was resolved and the PDF generation worked flawlessly.

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

What is the best way to display components in VueJS?

I am looking to dynamically render a component based on my variables with the following code: <div>{{ auth ? <AuthCorrect /> : <AuthIncorrect /> }}</div> However, my application is currently rendering it like this: {{ auth ? auth ...

New post: "Exploring the latest features in Angular

Looking for help with integrating Angular and SpringREST to fetch data from the backend? Here's my situation: I need to retrieve a JSON string from the backend using a POST request, send it to my site's hosted link, and display it on the user int ...

Three.js - implementing a billboard effect that preserves orientation through camera pans

My situation involves a plane geometry that always faces the camera using the following line of code in the update loop: plane.lookAt(camera.position); While I am utilizing OrbitControls to manipulate the camera, the plane successfully maintains its orie ...

An illustration of webpack 4 and Vue.js compatibility tailored specifically for Internet Explorer 11, featuring multiple entry points

This feels like déjà vu - yet another issue with Internet Explorer and webpack. I'm on the brink of deploying my project when IE 11 decides to mess everything up. I thought I had covered all bases with babel-polyfill and the latest versions, but of ...

Encountered a Error: [$injector:modulerr] while integrating Angular JS with the mysterious Planet 9

I encountered an error after implementing AngularJS in Planet 9. Planet 9 is a tool built on top of SAP UI5, offering drag and drop functionality as well as the ability to include HTML, CSS, and JavaScript. I needed to use ng-repeat for an application, so ...

Exploring the concept of next middle-ware within the realm of Express.js and Sail.js controllers

Currently, I am utilizing sails.js framework which is constructed on top of express.js. Within my routes.js file, I have defined a route as shown below: '/account/login': { controller : 'Session', action : 'l ...

Validation of HTML forms through JavaScript

I'm working on form validation and struggling with implementing preg_match check from a variable. Currently, I can validate empty fields successfully, but that's not sufficient. Any suggestions on how to proceed? var pattern = /([a-zA-Z0-9]|[a-z ...

Can Java provide functionality similar to JS callbacks?

Can a similar functionality be achieved in Java? function sum(num1, num2, onComplete) { var result = num1 + num2; onComplete(result); } (function(){ sum(3, 5, function(res){alert(res)}); })() Is it possible to implement this in Java without ...

Guide to importing Bootstrap 5 bundle js using npm

Having some issues with implementing Bootstrap5 and NPM. The website design is using bootstrap, which works fine, but not all the JavaScript components (dropdowns, modals, etc). I want to figure out how to import the Bootstrap JS bundle without relying on ...

Design a personalized .OBJ / .MTL file and showcase it using the power of three.js

I attempted to create a basic blender model, export it to .obj/.mtl, and then render it with three.js. However, I am experiencing an issue. I have downloaded and uploaded the official three.js demo, and the objmtl-loader is functioning properly with the or ...

Ensure that the view is only updated once the JSON has been completely received from the AJAX call in AngularJS

Just starting out with angularJS and still in the learning phase. I'm currently working on creating a navbar for the header that will fetch data from an ajax call. The issue I'm facing is that it displays {{obj.pageData}} until the data is fully ...

How can you use plain javascript to drag and drop the cross sign within the box in the grid?

Creating a grid in HTML where clicking on a box will draw an x sign and remove it if clicked again. View the DEMO here. Challenge Description:- I am now looking to implement dragging the cross (x) sign to another grid within the box, but cancelling the ...

Why does React component still use old state when re-rendering?

I recently encountered an issue with my code. I am using an array of objects in my state, and when I delete an item from the array, the component does not render correctly without the deleted object. Additionally, when I try to open another object (trigger ...

Tips for showing a DialogBox when a blur event occurs and avoiding the re-firing of onBlur when using the DialogBox

Using React and Material UI: In the code snippet provided below, there is a table with TextFields in one of its columns. When a TextField triggers an onBlur/focusOut event, it calls the validateItem() method that sends a server request to validate the ite ...

Generate a random number using the Math.random() method in Node.js/JavaScript to access a folder on the local machine

I am facing a challenge in reading a JSON file located deep within multiple folders on my local machine. The issue arises because the folder name where the file is stored changes every time, as it is generated using the Math.random() method with the prefix ...

Why does the fillText() method in HTML5 Canvas erase everything after using the clearRect() method?

Whenever I use the writeTextToCanvas method before the clearCanvas method, everything works perfectly. However, if I call the clearCanvas method first and then writeTextToCanvas, the drawing functions work fine after clearing the canvas but the fillText fu ...

The function CKEDITOR.replace() is not defined

I'm currently utilizing backbone-forms and I am looking to swap out my textArea with CKEDITOR. However, when I try to implement the code, I keep encountering an error message: Uncaught TypeError: undefined is not a function (for CKEDITOR line) defin ...

The cross-domain AJAX request fails to receive a response

I am currently working on validating PAN card details. I am utilizing an AJAX call to verify the PAN card entered by the user, sending the PAN number to this URL: . The data is being sent to the following URL using AJAX call: function callbackFnc(data) { ...

The response from Moment.js shows the date as "December 31, 1969."

Currently, I am in the process of recreating one of FCC's backend projects: Upon testing my code, I noticed that when I input the following URL: http://localhost:3000/1 The result is as follows: {"unix":"1","natural":"December 31, 1969"} var e ...

Using V-model with Vue3 Web Components

I am trying to develop a web component using Vue3 to handle inputs and forms. However, I am encountering issues with two-way data binding. I have included the web component in my HTML page. <vue-input-text id="sample_input" name="sample_i ...