Currently, I am working on incorporating dashboard stats into one of my projects. I have successfully added charts to the dashboard using C3js, and everything is working perfectly.
However, I encountered an issue when attempting to generate a PDF of this dashboard using Rotativa Plugin and wkhtmltopdf. The generated PDF includes data but does not display the charts.
Details of the Application:
Server-Side: ASP.Net MVC5
Client-Side: Javascript, Rotativa, C3js
When faced with a similar issue, I discovered that Rotiva was not retrieving all my included files or was taking too long to do so.
To resolve this, I identified essential elements and constructed a "static layout" that encompassed all necessary components inline. This could involve CSS files required for proper rendering or included JavaScript files. By manually adding the contents of these files into style or script tags within the Static Layout, Rotativa could access these payloads without additional retrieval.
//Static Layout
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<meta charset="utf-8" />
<style type="text/css">
body {
color: white;
}
/*Any necessary style information*/
</style>
<script type="text/javascript">
/*Any required code*/
</script>
</head>
<body>
<div class="container">
@RenderBody()
</div>
</body>
</html>
I implemented this Layout as a replacement for my standard Layout specifically for the Rotativa exporting views.
Subsequently, I duplicated the view for Rotativa PDF output, utilizing this static layout.
@model SomeModel
@{
ViewBag.Title = "Some Title";
Layout = "~/Views/Shared/_LayoutStatic.cshtml";
}
I have created a web application that requires both desktop and mobile views, utilizing Angular JS. Everything is functioning as expected except for the text alignment within tables. I attempted using <td align="left">, but it did not produce any cha ...
https://i.stack.imgur.com/Ha3yC.pngI have a unique setup in my next js project with two different navbar layouts and ten pages. I'm looking to assign navbar one to five pages and navbar two to the remaining pages using layout.js. Can anyone provide gu ...
Currently, I am working on a page where check boxes are generated dynamically. Every time a user clicks on any of the check boxes, the following event is triggered: $(':checkbox').click(function() { }); I would like to know how I can retrieve ...
Trying to implement slick.js, a carousel framework, in an Angular project. Initially attempted 'npm install slick --save' and manually adding the downloaded files to scripts and styles JSON objects. When that failed, resorted to importing the C ...
I have scoured various forums in search of answers, but unfortunately, I haven't found a solution that fits my specific query. I am looking to ensure that the .main-content (article text and images) occupies the full width of the mobile screen without ...
I have been working on a slider in Codepen that is functioning well, and now I am trying to tweak it for my website. My goal is to make the carousel pause when someone hovers over it. I've experimented with all the options available on the owl slider ...
How can I retrieve data from the URL provided in req.body.url using Postman's collection tool? In my code snippet, I have defined a key as "URL" and the corresponding value as a live URL. You can refer to the screenshot below for more details: https: ...
Looking to sort an array in a specific numerical order? Check out this example: const files = ['30.png', '10.png', '1.jpeg', '2.jpeg', '12.gif', '4.png'] If you're running into issues when ...
Currently, I am facing an issue with inserting multiple records into a MySQL table at once. Just so you know, I am using Node.js along with MySQL (you can find more information about it here: https://www.npmjs.com/package/mysql) Here is what I have been ...
I'm currently working on utilizing a GridView to display a DateTime value. My progress so far has allowed me to showcase the data with the desired format string by implementing: <asp:GridView ID="myGrid" ... > <Columns> <as ...
import React from 'react'; import ReactDOM from 'react-dom'; import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import getMui ...
I'm facing an issue with reading a value from the namespace. The code snippet below is supposed to retrieve the descendents into a list. XDocument document = XDocument.Parse(QueryParmeterString); XNamespace nameSpace = XNamespace.Get("h ...
I've been working on implementing a popup on my existing page that opens 4.5 seconds after the page loads. I want to add a blur effect to the background when the popup appears. I've tried various methods to add the blur effect to the main div, bu ...
In my project, I am utilizing a new AppDomain to create an instance of a type that inherits from MarshalByRefObject. This instance, referred to as "ObjectA" in this demonstration, is created using CreateInstanceAndUnwrap and is then assigned to a variable ...
I am a newcomer to Bootstrap and I'm attempting to create a three-column navigation menu with the nav-links centered in the middle. While using grids or flexbox, I could easily accomplish this in five minutes. However, for some reason, I am struggling ...
While using Typescript 3, I encountered a situation where I needed to modify a type alias from the @types/json-schema definition provided by DefinitelyTyped. The issue arose when I wanted to incorporate a custom schema type into my code. Since this custom ...
Incorporating TypeScript and Kendo Grid into my project, I am seeking guidance on how to invoke a method within a C# class object (specifically the ProcessData method in the Utility.cs object) from TypeScript. Can someone please advise me on how to accom ...
Recently, I've set up an express js controller file as follows The File Path: /controllers/usersController.js // Register User module.exports.register = function(req, res) { ... } // Login User module.exports.login = function(req, res) { ... } // ...
After reviewing similar answers like this one, I'm still feeling lost and hoping for some guidance. I recently updated the bootstrap theme on my flask app, and now I'm encountering an error during the docker build process at the yard run command. ...
My search function uses AJAX to retrieve data from the web-server, and I am trying to implement a fade-in animation for each search result. I want the results to load and fade in one by one with a slight delay between them. Currently, it seems like all th ...