I am using the code below to save the webContents view into PDF file.
saveReport() {
const remote = require('electron').remote;
const webContents = remote.getCurrentWebContents();
webContents.printToPDF({
pageSize: 'A3',
landscape: false
}, (err, data) => {
remote.require('fs')
.writeFile(TEMP_URL, data);
});
},
The view is a report and have a really long content inside it (see below).
Instead of showing a full view, I see a partial view inside a single page with a scrollbar. Below is the screenshot for the generated PDF,
Expected behavior
Just like a real browser, the generated PDF should contain all the view if a single page does not provide enough space, multiple pages should be generated.
I am thinking probably something wrong with my css.
I had a similar requirement for my current project and i've noticed that when you use this api , you can customize how the pdf will be rendered by adding a css file to your main html with the media query set to print media="print".
this css stylesheet will be applied only if you print something or export it to pdf via the api method printToPdf().
if you are using some ui kit like photon or bootstrap , try to disable it and see if it helps.
last tip: try to use the css property page-break-before: always;
Hope this helps
Related
I'm using docusaurus for our dev docs.
How to disable TOC?
Thanks.
Docosaurus has Markdown Frontmatter metadata fields for .md files where you will eventually make use of the hide_table_of_contents field and set it to true.
Your .md should look like:
---
hide_table_of_contents: true
---
# Markdown Features
My Document Markdown content
There does not seem to be a way to make the hide_table_of_contents setting default to true; you need to add it to the Front Matter for every document if you want to completely disable the ToC display.
Another approach to completely disable the ToC display would be to edit the css, adding:
.theme-doc-toc-desktop {
display: none;
}
How can I use Cypress to save the entire HTML source of a page as a text file, as if I right-clicked on the page and selected "View Source"?
This generates a JSON object that doesn't include the HTML
cy.document().then((doc) => {
cy.writeFile('pageMarkup.html', doc);
});
and this outputs a bunch of CSS and JavaScript, but it still doesn't include most of the actual HTML document
cy.get('html:root').eq(0).invoke('text').then((doc) => {
cy.writeFile('pageMarkup.html', doc);
});
I've gotten close enough by using the following:
cy.get('html:root').eq(0).invoke('prop', 'innerHTML').then((doc: any) => {
cy.writeFile('pageMarkup.html', doc);
});
The file that it creates has additional CSS and an embedded Cypress script tag that are different from what I would see as an actual user, but it does contain the HTML. If anyone has an idea on how to refine this to more closely match an end-user's "View Source" from the context menu, please post.
I am trying to configure a JavaScript function to sort of 'reload' on a particular web page. The site has an overarching JS and CSS framework, but I just want this particular function to load a bit differently.
The JS function in the JS framework sets the height of a grid element dynamically. For example, if I have three elements that have a height of 155px, 34px, and 100px, it takes the element with the highest value and applies that height to all of the grid elements, making them all 155px.
For the rest of the pages in the site, the code is fine because the JS script executes on page load. However, the page I'm using the function on doesn't seem to adhere to the JS script. It still retains differing heights when it is supposed to have the same height.
What's different about this particular page is the application coded in it. There is a filtering application in the page that features a Search text box and a checkbox similar to Amazon's application filters for categories like Men's or Women's clothing. However, unlike Amazon, checking/unchecking the checkboxes or typing something else in the Search box simply loads/reloads the 'content' but the page doesn't actually reload and the content are simply links. The links are loaded from a separate XML file.
The links in this case are the grid elements. They are set up to look like interactive buttons.
Here is the code for the JS function:
(function ($, window, document, undefined ) {
'use strict';
// add initialisation
this.addInitalisation('equal-heights', function() {
this.debug('Module: Equal Heights');
var font = new FontFaceObserver('BentonSansRegular');
font.load().then(function () {
// console.log('Font is available');
$(".grid > .grid-item").matchHeight();
});
});
// Register UI module
this.UIModule({
module: 'equal-heights',
init: function() {
this.initialize('equal-heights');
}
});
})( jQuery, window, window.document );
I didn't really upload a whole lot of the code because I am seeking to understand on how to solve this problem conceptually (provided that I was clear in my explanation of the issue).
To iterate my goal, I want to load the grid items in this particular web page to be the same height even after clicking/typing through the filter application.
Please let me know if I can clarify anything else.
This answer has been solved. What I did (what worked) was take this piece of code: $(".grid > .grid-item").matchHeight(); and place it in the JavaScript file that the particular web page used. This code is what sets the element height dynamically.
I have a page with a URL that starts with /Plan/Production. I am using the HTML5 History API, and when I click on a certain link, it will change the beginning of the URL to /Plan/Selling. This works great while clicking links and using the forward/back buttons, but when I refresh the page after the start of the URL changes to /Plan/Selling, it doesn't load a layout anymore. My solution was to edit my _ViewStart.cshtml file to check the beginning of the URL, and render a layout based on that, as seen in my code snippet below.
The problem is, if my URL begins with /Plan/Selling, it never even uses the _ViewStart.cshtml file. It only uses this file if the URL begins with /Plan/Production. Adding console.logs confirmed this. To be clear, the location of the file is /Plan/Views/_ViewStart.cshtml. Two examples of URLs I'm using are https://localhost:44301/Plan/Selling/DetailsPPVS/1 (doesn't load a layout and never uses that ViewStart file), and https://localhost:44301/Plan/Production (Loads the proper layout and does use the ViewStart file).
How can I get https://localhost:44301/Plan/Selling/DetailsPPVS/1 to use /Plan/Views/_ViewStart.cshtml?
Code from /Plan/Views/_ViewStart.cshtml:
<script>console.log("Plan/Views/_ViewStart.cshtml");</script>
#{
if (Context.Request.Path.StartsWith("/Plan/Selling", StringComparison.OrdinalIgnoreCase))
{
<script>console.log("Pjax Layout");</script>
Layout = "~/Views/Shared/_PjaxLayout.cshtml";
}
else {
<script>console.log("Regular Layout (~/Areas/Plan/Views/Shared/_Layout.cshtml)");</script>
Layout = "~/Areas/Plan/Views/Shared/_Layout.cshtml";
}
}
_ViewStart.cshtml is not right place for this. try adding your code in _Layout.cshtml.
I have started making some demos using jspdf. I have a html file and my css is in external file.
I have written the below code to generate my pdf
$('#pdfButton').on('click', function(){
var pdf = new jsPDF('p','in','letter')
, source = $('#main')[0]
, specialElementHandlers = {
'#bypassme': function(element, renderer){
return true
}
}
pdf.fromHTML(
source // HTML string or DOM elem ref.
, 0.5 // x coord
, 0.5 // y coord
, {
'width':700 // max width of content on PDF
, 'elementHandlers': specialElementHandlers
}
)
pdf.output('dataurl');
});
});
where main is the id of the div whose content I want to export as pdf.
The content is exporting as pdf but not the entire content(the pdf gets cut). It can be dynamic content. Also the css I have in external files are not getting applied , styles like table-row, background-color, etc are not getting applied.
How can I get my external css applied to the pdf before it is generated?
Is it even possible with jsPDF..? Any suggestions please.
Thanks in advance
As far as I know jsPDF doesnt take external css. It infact doesnt even take inline css. It is currently not suitable to use jspdf for converting html to pdf.
Hope this helps.
Bear in mind that when you are PDF'ing things in HTML, it is essentially printing them to a file. This means you need to create a print stylesheet ideally, but also bear in mind that print stylesheets mean that it ignores things like background color. The way around this would be to have a background image in your print stylesheet that is the color.
Also see this article, http://css-tricks.com/dont-rely-on-background-colors-printing/
Hope that helps