Export JSP to Word With External CSS - html

I am trying to export a JSP generated document webpage to Microsoft Word. In the web browser, everything looks great. However, when I change
<%# page contentType="text/html; charset=utf-8" language="java" import="java.util.*, java.text.*;" errorPage="" %>
to
<%# page contentType="application/msword; charset=windows-1252" language="java" import="java.util.*, java.text.*;" errorPage="" %>
The page will try to open in word, but it will lose all of its styling.
I am linking to few external style sheets, but these are not picked up in the Word Document.
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link rel="stylesheet" type="text/css" href="css/general.css"/>
<link rel="stylesheet" type="text/css" href="css/headerfooter.css"/>
I have also tried linking href to the direct location on the server. This also did not work.
<link rel="stylesheet" type="text/css" href="http://localhost:8080/app/css/common.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/app/css/general.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/app/css/headerfooter.css"/>
Finally, I have tried to move the styling inside the JSP. However, this has not worked when it comes to exporting the document to word, either.
How can I export a JSP to Microsoft Word and have it retain styling?

Linking to external styling sheets will cause the JSP to lose formatting. The solution is to embed the styling inside the JSP. While I mention above that I did that, it contained formatting errors that, once fixed, displayed the styling properly in Microsoft Word.
Additionally, here is a good resource for adding Word specific styling to your document such as orientation, page margins, and embedded images:
http://sebsauvage.net/wiki/doku.php?id=word_document_generation

Related

Managing multiple stylesheets in Blazor

Managing multiple stylesheets in Blazor
Background
I am a backend developer creating a Blazor WASM website.
Problem
I am currently developing an application which is using MudBlazor. I am happy with MudBlazor and would like to continue to use it.
However, I would also like to use the HTML editor provided by Radzen.
The issue I am facing is that there are elements in the MudBlazor sytlesheet (I'm not sure exactly which ones) which are keeping the visuals in the Radzen HTML Editor from working at 100% (bullet points not appearing, indentation not quite right, etc).
With Mudblazor stylesheet active, the text editor does not work as expected
What I've Tried
To confirm that the issue is with the MudBlazor stylesheet, I have commented out the MudBlazor stylesheet in index.html, resulting in the html editor working as expected (but the rest of the website not having the MudBlazor styles). The image below shows the result:
With MudBlazor stylesheet commented, the text editor works as expected
I have put the Radzen Text editor into its own component, so that there are no MudBlazor components accompanying it. From there, I have been attempting to find a way of excluding the mudblazor stylesheet from the html editor component.
Investigated the use of Blazor CSS Isolation, but from what I can see this is designed for the use of custom css created by myself, not the use of stylesheets (please correct me if I'm wrong).
I read somewhere that in general html the latest stylesheet will be utilised. So, in my TextEditor.razor page, add the stylesheet in an attempt to make it the last thing read:
<head>
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css" >
</head>
The Code:
Index.html
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Writers Friend Web App</title>
<base href="/" />
<!--<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />-->
<link href="css/app.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<!-- Commenting the below stylesheet allows the Text Editor to work as expected -->
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<link href="_content/MudBlazor.ThemeManager/MudBlazorThemeManager.css" rel="stylesheet" />
</head>
TextEditor.razor
<head>
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css" >
</head>
<RadzenHtmlEditor Style="min-height: 300px; margin: 1rem;"/>
#code
{
[Parameter]
public Action<string> OnTextChange { get; set; }
}
What I'm looking for
I would like a way of allowing the Text Editor component to have access to the text editor stylesheet ONLY. i.e. exclude the MudBlazor stylesheet from my component.
I'm wondering if I can remove the MudBlazor stylesheet from the index.html file and include it in the section of all the other components, but this would make it messy and I would like to avoid this if possible.
Thank you in advance!

My css import fails

stupid HTML question but I ve spent a lot of time trying to solve it.
I have difficulties to include some css files into a jsp page.
When I try:
<link href="<c:url value="/css/bootstrap.css"/>" rel="stylesheet">
And when I try:
<link href="<c:url value="/css/bootstrap.css"/>" rel="stylesheet">
server returns a 404 error and fails to import the file:
{code="404", msg="/css/bootstrap.css", uri=/css/bootstrap.css}
The text
" rel="stylesheet">
gets displayed on the web page.
The imports where at the top of the to avoid issues with previous lines.
The file is IS in /css dir
and I copied it in all possible places where it could be seeked to make sure.
So I m really puzzled...
Is there something obvious top that knocks somebody's bells?
I had forgotten to include this:
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
To make it work:
<link href="<c:url value="/css/bootstrap.css"/>" rel="stylesheet">
Maybe the use of single quotes inside double quotes will fix it.
<link href="<c:url value='/css/bootstrap.css'/>" rel="stylesheet">
Also, have you tried simply
<link href="../css/loginstyle.css" rel="stylesheet">
?

Including css and js files in a JSP not working

Hi I am facing a problem including js/css even image src in JSP files.
When my application starts with any context say abc ex. http://localhost:8080/abc and browser on a url ex http://localhost:8080/abc/reports/userCount and in that JSP i am including css as
<link rel="stylesheet" type="text/css" href="resources/thirdparty/css/jquery-ui.smoothness.min.css">
a 404 error is shown in browser console and the URL to download css is formed as
http://localhost:8080/abc/reports/resources/thirdparty/css/jquery-ui.smoothness.min.css
But when I am on on a page with URL like
http://localhost:8080/abc/createBadgeStep2
the same include to css works fine because url to download css is created fine.
http://localhost:8080/abc/resources/thirdparty/css/jquery-ui.smoothness.min.css
I can see clearly here that second slash after Context in the URL is creating problem. But can't figure out how to fix it. The problem goes for js and images too.
Any help will be highly appreciated.
Import your stylesheet as
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/resources/thirdparty/css/jquery-ui.min.css">
If you are importing several resources down the page, better set the context path in a page-scoped variable using the <c:set> JSTL tag.
<c:set var="ctxPath" value="${pageContext.request.contextPath}" />
Then use the variable in your href attribute.
<link rel="stylesheet" type="text/css" href="${ctxPath}/resources/..." />
You would also need to import the JSTL tag library to use the <c:set> tag.
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

Template’s CSS is not styling the HTML

I've downloaded a template from w3layouts.com to make a website, and when I unzip the layout and try to open any of the HTML files, none of the CSS styling the page (it just looks as if there's no CSS).
When I inspect the HTML files, the CSS appears to be included in the header. For example, this is included in smartphone/blog.html's header:
<link href="smartphone/css/style.css" rel="stylesheet" type="text/css" media="all" />
You have to simply update this link tag
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
Because in this template href="smartphone/css/style.css". but actually css dictonary present in same level where other html file are. So you just update html file link tag to new href="css/style.css".
Is this template is for website, phone so you must set this template using index.php file to set dynamic path. but above solution is static not a dynamic. if you have to set dynamic path you must configure template step.

Store LINK elements and SCRIPT elements in a separate file

We may have to place lot of LINK elements and SCRIPT elements in the head elements of an HTML page. Also there can be a lot of pages with same above mentioned elements. Therefore can we put all the of them in a one file and place only that links containing file in HTML head element?
Eg: Something like,
<link href="links.something"> etc
instead of
<HEAD>
<link href="css/home.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/images.css" rel="stylesheet" type="text/css" media="screen" />
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="css/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery-ui-1.9.2.custom.js"></script>`
<HEAD>
In your case it would be best to do PHP includes For example a page would be coded in parts: header.php, footer.php, and the main content would be loaded dynamically too.
<html>
<head>
<?php
include('header.php'); //PHP file that holds all the links(not anchor links) and scripts
?>
</head>
<body>
<?php
include('body.php?page=whatever');
include('footer.php');
?>
</body>
</html>
By doing so, you'd only have to edit one file to make changes to many.
You could generate them dynamically from a server-side script (say, PHP), I've sen this done using the CodeIgniter MVC framework, though you could do it with straight PHP.
You could also use a templating engine (like Smarty) to do the same thing.
Straight php:
<head>
include('js_files.php');
</head>
CI MVC (in the controller), this is fairly involve & there are much better examples on the web:
$jsfiles = $this->load->model('head_files');
$head = $this->load->view('head', $jsfiles, false);
I'm not sure about Smarty as I'm only starting in it myself, this is the main reason I started with it, unfortunately I've lost the link to the tutorial I saw.