The ng-html-to-pdf-save feature does not function properly when using Persian or Arabic characters

I am trying to utilize this module to print Persian content, but unfortunately, the characters are not displaying correctly. Here is the code snippet I am using:

<script type="text/ng-template" id="patient_modal.html">
    <div class="modal-header">
        <button type="button" class="close" ng-click="close_patient()">&times;</button>
        <h4 class="modal-title text-center" id="patient-title">اطلاعات بیمار</h4>

(...)

The desired displayed content should look like this: https://i.sstatic.net/v8e0h.png

However, it actually appears like this: https://i.sstatic.net/b1nTA.png

javascripthtmlcssangularjs

Answer №1

The issue appears to be some content being cut off from the top and bottom of the HTML code provided. To address this, I enclosed the entire content within another div and used the pdf-save-content directive on it. Please let me know if I misunderstood the problem. Below is the modified code along with a plunker for reference.

<div pdf-save-content="idOne">
    <div class="modal-header">
      <button type="button" class="close" ng-click="close_patient()">×</button>
      <h4 class="modal-title text-center" id="patient-title">Patient Information</h4>
    </div>
    ... (Code continues as-is) ...
  </div>

Plunker demo available at: https://plnkr.co/edit/G3PDqIRLkWcwes4pw7dR?p=preview

Image of HTML and saved PDF: https://i.sstatic.net/FN0QJ.png Saved PDF image: https://i.sstatic.net/XEjWy.png

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 Twilio Video in server-side Javascript

I am in the process of setting up Twilio Video on my server and have successfully installed the PHP server. The iOS versions of the Twilio video starter app can access this server without any issues. My main query revolves around customizing the Twilio Ja ...

javascriptnpmtwiliotwilio-apitwilio-video

Encountering an error with Angular-NG8001 due to an unknown element. Any suggestions on how

I am encountering an issue with my Angular project. The project structure I am working with can be found here: app structure. Within my app.module.ts file, the code appears as follows: import { NgModule } from '@angular/core'; import { BrowserMod ...

javascriptangularcomponents

Unusual trio of divs lined up next to each other

I typically work with tables, but I need to rearrange some div elements by dragging and dropping them. I decided to try a table-less approach this time around. Here's my goal: I want the spacing between all elements to be 24px. My main issue is gett ...

csshtmllayoutcss-tables

Broken responsive carousel using bootstrap

Looking for some help with a responsive bootstrap carousel issue. The carousel items adjust themselves below each other when the screen size is reduced. I want them to display as single items in the carousel. Here are the screenshots and the code. Please ...

htmljquerycsstwitter-bootstrap-3

Node.js and TestCafe encountered a critical error: Inefficient mark-compacts were performed near the heap limit, resulting in an allocation failure. The JavaScript heap ran

While executing my test scripts in Node v14.6.0, I encountered the following problem. Here are some of the options I've tried: I attempted to increase the Node Heap Size but unfortunately had no success: export NODE_OPTIONS=--max_old_space_size=4096 ...

javascriptnode.jsnpmheap-memorytestcafe

Adding markers to a Leaflet map using coordinates retrieved from a Supabase database - a step-by-step guide

I am looking to incorporate markers on a map using coordinates stored in a Supabase database column. Below is my Vue code: <l-marker v-for="(marker, index) in markers" :key="index" ref="markersRef" :lat-lng="marker.po ...

javascriptvue.jsvuejs2leafletsupabase

Achieving a 100% width input with Flexbox: Tips and tricks for success

Check out this flexbox form I created using bootstrap 4: https://jsfiddle.net/kkt0k2bs/1/ I have implemented a media query to adjust the form elements for smaller screens. For larger displays, I want the form items to be displayed inline. However, on sm ...

twitter-bootstrapcssflexboxtwitter-bootstrap-4

The Scope does not contain a definition for the basic AngularJS Form

Recently, I started experimenting with AngularJS forms on jsfiddle and ran into an issue where a basic form example was not behaving as expected. The named form I created wasn't appearing in the scope as anticipated (I was expecting a FormController i ...

formsangularjs

Establishing a limit on the maximum number of classes that can be selected/activated when clicking on multiple divs or IDs

Working on a talent tree, I encountered an interesting issue. Currently, the code allows users to select up to 4 talents. However, when duplicating the talent tree for a second hero or party member, the same limit is shared across all trees. Attempts have ...

javascriptjquery

Steps for ordering by a JSON attribute:

Within my JSON file, I have the following simple structure: {"Item1": {"p1": {"p1sub1": 8, "p1sub2": 7}, "p2": {"p2sub1": 6, "p2sub2": 5} }, "Item2": {"p1": {"p1sub1": 4, "p1sub2": 3}, "p2": {"p2sub1": 2, "p2sub2": 1} } } To retrieve this data, I use th ...

javascriptjsonangularjsangularjs-ng-repeat

Ajax is displaying some unusual behavior

Currently, I am working on an ajax request to check if a specific combination of username or password exists. <script> $("form").submit(function(e){ e.preventDefault(); //send data to ajax file now $.ajax({ type: 'POST ...

javascriptphpjqueryajax

What is the process for activating JavaScript and embedding it into an HTML document?

I am currently utilizing a JavaScript API that contains several functions. How can I incorporate it into an HTML file? One of the functions, "api.ping()", performs well on PowerShell, but I am encountering difficulties with displaying it on an HTML file. ...

javascripthtml

The setLanguage function in jsPDF does not support rendering different language characters

I'm currently working with jsPDF in Angular 2 and I'm experiencing an issue where my HTML content is not converting successfully into a PDF when it's written in Hebrew. Other languages seem to work fine, but Hebrew is causing a problem. How ...

javascripthtmlangularjspdf

What is the best way to send JSON data to Sass in ReactJS?

In my current project, I am developing a React/Redux application with Webpack that showcases UI components and enables users to adjust the colors of those components. The styling is being done using CSS Modules with scss. My preference is to keep all the s ...

cssjsonreactjssasswebpack

Issue with Ajax: Value returned from database select is '0' instead of string

Operating a website for a pre-owned car dealership, I have developed a system that showcases all the current vehicles in stock on a single page using a specific SQL query: "SELECT * FROM inventory ORDER BY timestamp ASC". Recently, I've been explorin ...

javascriptphpajaxmysqli

When you import a mongoose schema into another schema file, the imported schema is not recognized and returns

Directory structure: │ resolvers.js │ schema.js │ └───schemas matchesSchema.js playersSchema.js teamsSchema.js tournamentsSchema.js I have 4 different schemas, and I want to utilize some of them in others ...

javascriptnode.jsmongodbmongoosemongoose-schema

Issue with Jquery plugin malfunctioning on dynamically loaded elements via Ajax requests

Description: I'm currently working on a project where I need to load elements with expiration dates pulled from my database. To achieve this, I am using a Jquery plugin that relies on the HTML5 Data Type Attribute for setting the "end date". Everythin ...

javascriptjqueryajax

Getting Jquery to function effectively on a page loaded using ajax请求

I'm facing an issue with writing jQuery code within a page that is loaded via AJAX. When I try to implement the code on the page requested via AJAX, it doesn't work properly. However, if I remove the AJAX request and load the page directly, the j ...

javascriptjqueryajax

Generate tables and rows dynamically

I am looking for guidance on dynamically creating a table and adding rows to it. I have successfully created a table with one row containing form fields, but I am unsure how to add additional rows. Any examples or suggestions on how this can be implemented ...

javascriptphpjqueryangularjs

Ways to pause a nested iteration while the inner loop is waiting for a response?

My issue involves creating a function in JavaScript that can generate correct answers for an online multiple choice questionnaire form. The goal is to iterate through the questions and identify the correct responses. To simplify things, I will focus on ha ...

javascriptjqueryajaxcallbackjquery-callback