how to show the doc, xls, pdf and txt file in iframe? - html

Using "frame" of html for showing the files but only show the PDFs and text file in "frame", doc and x ls files are downloaded instead of showing.
Following is the sample code:
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title>Open Word in Iframe</title>
</head>
<body>
<div align="center">
<table border="1" cellspacing="1" cellpadding="1" width="100%">
<tr>
<td width="25%" align="left" valign="top">
Doc 1
<br />
Doc 2
<br />
Doc 3
</td>
<td width="75%" align="center" valign="top">
<iframe name="awindow" frameborder="2" width="580" height="440" src="doc.txt"></iframe>
</td>
</tr>
</table>
</div>
</body>
</html>

You need to configure MIME types for your web server in order to avoid downloading of those file types, when the remote client requests them directly (i.e. not through your web scripts).
.doc and .xls file types are probably not configured by default, so they default to a MIME type which is simply downloaded instead of displayed in the browser. Btw, the standard browsers don't know by default how to display Microsoft-specific file types, so you might need an extension/plugin/flash object to display it properly.

To display Word/Excell/PDF etc. file without plugins, use the Google Drive Viewer.
Instead of <iframe src="https://your-url.com/file.doc"> use <iframe src="https://docs.google.com/viewer?url=https://your-url.com/file.doc"> and the files will load.

Related

vertical gap between 2 image in outlook 2013 when HTML as a text

i created mailing but there is a vertical gap between 2 images and i read all solutions about this problem and not solved.
last chance is typing this portal and ask you guys :(
first i open below code on notepad++ and change it then outlook 13 attach file => as a text => then boom vertical gap showing up.
here is my code
<html>
<head>
<title>mailing</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="1">
<a href="mailto:info#ygtur.com">
<img src="http://yucel.ygtur.com/mailing/erkenrez/images/mailing_12.jpg" style="display: block;"></a></td>
<td colspan="1" rowspan="1">
<a href="http://www.ygtur.com/">
<img src="http://yucel.ygtur.com/mailing/erkenrez/images/mailing_13.jpg" style="display: block;"></a></td>
</tr>
</table>
</body>
</html>
here is the picture of the problem
You could try using css to style the table instead of using border= cellpadding= etc. In fact you already tagged the question as css, so I guess you saw it coming :-)
Perhaps Outlook adds its own css if it does not find any, or the view engine that it uses may apply defaults that you are not expecting.
EDIT:
You have whitespace between the <a href> and <img> tags. You should remove that, it may be the cause of your problem. It wouldn't be a problem if the link had just text, but now it has text(whitespace) + an image, and both will show.

struggling to set a background image in HTML emails for all mail programs

I am trying to set a background image in an HTML email which needs to viewed in programs such as webmail and gmail aswell.
I have read other tutorials and the general rule is it is not recommended, I used the background in the body tag and as a failover have the same background image used in table tag, as some programs strip away the body and head tage from the emails.
Is there a way to successfully carry a background over web based programs and on a phone such as samsung?
HTML
<body topmargin="10" leftmargin="0" bottomargin="20" background="images/background.jpg">
<!--first table contains failover background-->
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td background="images/background.jpg">
<center>
<table style="border: #FFF 4px solid;" width="600px" cellpadding="0" cellspacing="0">
<tr name="link-1">
<td align="center" valign="top">
<font style="font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;font-size:12px; color:#FFF;">CLICK HERE TO VIEW IN BROWSER</font>
</td>
</tr>
<!--THE REST OF THE MAIL THAT WORKS-->
</BODY>
</HTML>
If you have problem with using background-image in outlook, you should use VML
<v:image xmlns:v="urn:schemas-microsoft-com:vml"
style='width:500px;height:500px;position:absolute;top:0;left:0;z-index:-1;'
src="yourImageUrl" />
The best way to get it working for multiple devices is using the following website: https://backgrounds.cm which will help with Outlook.
Now-a-days this is less of an issue, but I would suggest you ensure your image is the full URL and publically available not based on your local machine.

cannot apply external CSS even after providing fully qualified URL in HTML String

body {}
.table{
background-color:aqua
}
this is my StyleSheet1.css saved in my local at C:\Users\ingyadav\Documents\Visual Studio 2015\Projects\StyleSheet1.css
<html>
<head>
<link rel="stylesheet" href="file:///C:/Users/ingyadav/Documents/Visual Studio 2015/Projects/StyleSheet1.css" type="text/css" />
</head>
<body>
<table class="table" border="1" style="width:300px;height:500px">
<tr style="width:auto">
<td style="width:150px;height:500px"></td>
<td>
<table border="1" style="width:150px;height:500px">
<tr style="width:auto"><td></td></tr>
<tr style="width:auto"><td></td></tr>
<tr style="width:auto"><td></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
And this is my HTML string to be loaded into pdf now
when i pass this to the evo html to pdf converter,its not loading the external css into the pdf.
in evopdf support they mentioned to provide the fully qualified URL's but after using proper URL also its unable to load the external css.
can anyone help me on this please.
No you cannot specify multiple locations in the href attribute. Per the spec, each <link> represents a document that is connected to your html. So by design it would be only one document.
More Example: https://www.w3.org/TR/html401/struct/links.html#h-12.3

Eclipse, Basic JSP and Apache Tomcat

I am well versed with the servlet thingy.
I am trying to make a project with the help of jsp. I made a web project on eclipse named website and then I copied some commands like jsp:include. At first it ran properly showing all the context, but after that it just gave errors like:
Http page not found
I don't know what I am doing wrong. Also I did not make changes in the web.xml file. I don't know if any change is required in that file.
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Yo</title>
<jsp:include page="Header.html"/>
</head>
<body>
<!--<div id="header" style="background-color:orange;width:1360px;height:120px">
<h1><style="margin-bottom:0;"><font size="72px" color="white" ><center>
UTTAR PRADESH TECHNICAL UNIVERSITY
</center></font></h1>
</div>-->
WebSite under contruction.
<table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td width="15%"> <jsp:include page="LeftPanel.html" flush="true"/>Left Panel </td>
<td width="70%" class="alignment">
<table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr><td><jsp:include page="Header.html" flush="true"/></td>
</tr>
</table>
</td>
<!--<td width="15%"> <jsp:include page="RightPanel.html" flush="true"/>Right Panel</td>-->
</tr>
</table>
</body>
This is the version I made but it's not working and even the simple code like below is not getting deployed properly.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Watch Initial D live Online Free</title>
<jsp:include page="Header.html"/>
</head>
<body>
Hey Whats Up just Testing..
</body>
</html>
i found out the reason why it got clashed and stopped responding .
it was conflicting with the oracle 10g server at the port 8080
so i switched the port to 80 of my apache tomcat server .
now it works properly .

How to detect file path in a string of html codes

I need to read in a string of HTML codes using ajax and refactor every file path found in the string.
For example:
I need to detect "../../images/home.jpg"
And change it to "http://www.mywebsite.com/report/images/home.jpg".
I am actually doing a dashboard. Using iframe to display content in a dashboard cost me performance. In order to not use iframe, I intend to read in the string of html codes of the targeted URL. But the only factor here is that if the filepath of any images, javascript or css are not absolute path, my dashboard will not be able to display.
Please give your thoughts in how you would detect file path within a string of html codes or is there any existing library that you know of.
Here is one of a simple html codes i am reading from.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><title>
Web Report: Customer Complains
</title><link rel="stylesheet" type="text/css" href="../../../css/Concept1.css" /></head>
<style type="text/css">
</style>
<body>
<div class="SectionTitleContainer1">
<div style="text-align: left;" class="SectionTitle">
Customer Complaints
</div>
</div>
<table cellspacing="0" cellpadding="5" style="width: 100%;" border="0">
<tr>
<td width="1%" align="left">
<a>
Refund
</a>
</td>
<td width="1%" style="text-align: right">139</td>
<td align="left" style="">
<img src="../../../images/tile-horiz-bar.png" style="height: 10px; width: 100px" />
</td>
</tr>
<tr>
<td width="1%" align="left">
<a>
Appointment Rescheduled/Delayed
</a>
</td>
<td width="1%" style="text-align: right">96</td>
<td align="left" style="">
<img src="../../../images/tile-horiz-bar.png" style="height: 10px; width: 69px" />
</td>
</tr>
</table>
</body>
</html>
After a long period of discovery, I learned that if there is a need for two different system to display identical UI, we should place the image files (or any other script files) in a common directory within a server. Web app should be given proper permission to access the files in the local directory of the server. The directory holding the image files should not be secured and not exposing to the public (if necessary).