'When exporting doc with png image in web doc the linked image cannot be displayed
When exporting doc with png image in web doc, I'm having issues that the linked image cannot be displayed. How can I solve it? The downloaded doc was opened in windows10 and word2019 above. But it will not display the images in an older version.
When exporting doc with png image in web doc, I'm having issues that the linked image cannot be displayed. How can I solve it? The downloaded doc was opened in windows10 and word2019 above. But it will not display the images in an older version.
This is my Code
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="plugins/select2/select2.min.css">
<style>
.dot {
height: 10px;
width: 10px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
margin-right:10px;
margin-left:30px;
}
</style>
<link href="assets/css/loader.css" rel="stylesheet" type="text/css" />
<script src="assets/js/loader.js"></script>
<script src="assets/js/prabhaavcustom.js"></script>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,500,600,700&display=swap" rel="stylesheet">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/plugins.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<link href="plugins/apex/apexcharts.css" rel="stylesheet" type="text/css">
<script src="plugins/apex/apexcharts.min.js"></script>
<script src="assets/js/libs/jquery-3.1.1.min.js"></script>
<script src="bootstrap/js/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="assets/js/app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://formbuilder.online/assets/js/form-builder.min.js"></script>
<script src="assets/js/html2canvas.js"></script>
<script src="assets/js/html2canvas.min.js"></script>
<script src="assets/js/custom.js"></script>
<script src="js/FileSaver.js"></script>
<script src="js/jquery.wordexport.js"></script>
<meta charset="UTF-8">
</head>
<body>
<script>
var customColors = ["#ffaa00", "#fa6900", "#fe4365", "#0b486b", "#542437", "#8a9b0f", "#6b5344", "#ff4e50", "#bf4d28", "#8fbe00", "#00a8c6", "#351330", "#cfbe27", "#91204d", "#009989", "#1b325f", "#4e395d", "#a70267", "#aa00ff"]
function questionloaded(element){
var selectedValue=element.value;
if (selectedValue == 'ALL') {
for (var i = 0; i < element.options.length; i++) {
var optionValue = element.options[i].value;
// alert("chart_"+optionValue);
if (optionValue != 'ALL') {
document.getElementById("chart_"+optionValue).style.display="block";
}
}
}else {
for (var i = 0; i < element.options.length; i++) {
var optionValue = element.options[i].value;
if (optionValue != 'ALL') {
if (optionValue == element.value) {
// alert(optionValue);
document.getElementById("chart_"+optionValue).style.display="block";
document.getElementById("chart_"+optionValue).focus();
}else {
//alert("N O T >" + optionValue);
document.getElementById("chart_"+optionValue).style.display="none";
}
}
}
}
}
</script>
<%
String [] customColors = {"#ffaa00", "#fa6900", "#fe4365", "#0b486b", "#542437", "#8a9b0f", "#6b5344", "#ff4e50", "#bf4d28", "#8fbe00", "#00a8c6", "#351330", "#cfbe27", "#91204d", "#009989", "#1b325f", "#4e395d", "#a70267", "#aa00ff"};
String projectName = request.getParameter("ViewQuestionWiseReportprojectName");
String questionnaireName = request.getParameter("ViewQuestionWiseReportquestionnaireName");
String questionListString = request.getParameter("ViewQuestionWiseReportQuestionList");
//System.out.println(questionListString);
JsonArray questionArray = (JsonArray) new JsonParser().parse(questionListString);
//System.out.println(questionArray);
%>
<div style="width: 100%; background: #ddd;z-index:100;">
<div class="container">
<div class="row"><div class="col-xl-12" style="margin-top:10px;margin:0px;padding:5px;">
<img src="./assets/img/logo.jpg" style="width:90px;float:left;margin-left:30px;">
<center><h4 style="margin-top:20px;color: blue;" id="reportTitle" name="reportTitle">Question wise report
</h4>
</center></div>
</div>
</div>
</div>
<div class="col-xl-11 col-lg-11 col-sm-11" style="text-align:right" >
<button type="button" onclick="javascript:Export2Doc()" name = "downloadWord" id = "downloadWord" class="btn btn-sm btn-primary" >Download</button>
</div>
<div id="questioncontainer" class="container" style="margin-top:130px;">
<div id = "questionheading" class="row">
<div class="col-xl-6" style="margin-top:10px;margin:0px;padding:5px;">
<B>Project:</B><%=projectName %>
</div>
<div class="col-xl-6" style="margin-top:10px;margin:0px;padding:5px;">
<B>Questionnaire:</B><%=questionnaireName%>
</div>
</div>
<div class="row">
<div class="col-xl-6" style="margin-top:10px;margin:0px;padding:5px;">
</div>
<div class="col-xl-6" style="display:none;margin-top:10px;margin:0px;padding:5px;">
<select class='form-control tagging' onchange='javascript:questionloaded(this)' name='questionChooser' id='questionChooser'></select>
</div>
</div>
<div id ="listOfCharts" name = "listofCharts">
<%
String questionSelectOptions="";
int count =0;
for(JsonElement questionElement: questionArray) {
String question = questionElement.getAsString();
String questionId = "question_" + count;
String type=request.getParameter(count+"_charttype");
count++;
if (type.equals("")) {
continue;
}
String chartHTML = ChartUtils.getChartHTMLString(projectName, questionnaireName, questionId, question, type);
questionSelectOptions = questionSelectOptions + "<option value='"+ questionId +"'>"+ question+"</option>";
%>
<div id="chart_<%=questionId%>" style="margin:15px;page-break-after:always;" class="widget-content widget-content-area simple-tab " >
<div class="row " >
<div class="col-xl-6" style="margin-top:10px;margin:0px;padding:5px;">
<h6><%=question %></h6>
<div style="height:500px;overflow: scroll;overflow-y:auto;overflow-x:auto;">
<table class="table table-bordered" width="95%" id="table_<%=questionId%>">
</table>
</div>
</div>
<div class="col-xl-6" style="margin-top:10px;margin:0px;padding:5px;">
<div id='' style='margin:15px;' class=''>
<div id="<%=questionId%>_piechart" class="piechart"></div>
</div>
</div>
</div>
<div class="row " id="chart_<%=questionId%>">
<div class="col-xl-12" >
<%=chartHTML %>
</div>
</div>
</div>
<%
}%>
</div>
</div>
<script src="plugins/select2/select2.min.js"></script>
<script src="plugins/select2/custom-select2.js"></script>
<script>
var defaultOption = "<option value='ALL'>View All</option>";
defaultOption = "";
document.getElementById("questionChooser").innerHTML=defaultOption+ "<%=questionSelectOptions%>";
function setSelect2() {
$(".tagging").select2({
tags: true
});
}
setSelect2();
function highlightRowfunc(divId, dataPointIndex,highlight){
//reset all rows
var tableElement = document.getElementById(divId + "_" + dataPointIndex).parentElement.children;
for(var c =0;c< tableElement.length; c++){
tableElement[c].style.backgroundColor = "#ffffff";
}
if(highlight){
document.getElementById(divId + "_" + dataPointIndex).style.backgroundColor = "#D3D3D3";
//document.getElementById(divId + "_" + dataPointIndex).scrollIntoView(true);
// document.getElementById(divId + "_" + dataPointIndex).parentNode.scrollTop = document.getElementById(divId + "_" + dataPointIndex).offsetTop;
}
}
//This function has to be in async as it is using HTML2CANVAS in a loop to get all the charts.
async function Export2Doc(){
//The Strings used for getting the Elements.
var downloadButtonId = "downloadWord";
var projectDetails = "questionheading";
var listofCharts = "listOfCharts";
var filename = 'document.doc';
//Disable the download button. until the completion of this function. As this is in Async mode, it will take time and we do not want multiple clicks.
document.getElementById(downloadButtonId).disabled = true;
var styleHtml = "<style type='text/css'>h6 {font-size: medium;} h1 {page-break-before: always; color:#FFFFFF;}"
+ "td{ border-collapse: collapse;border: 1px solid #ddd;cellspacing: 0;cellpadding:0; font-size: 12px;}, th{ border-collapse: collapse;border: 1px solid #ddd;padding: 2px;} "
+ "h8 {background-color: #000; height: 11px; width: 11px; border-radius: 50%;cursor: pointer;margin: 0 auto;}</style>";
var headHtml = "<head><meta charset='utf-8'><title>View Question Wise Report</title>"+styleHtml+"</head>";
var preHtml = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>"+headHtml+"<body>";
var postHtml = "</body></html>";
var wordHtml = "";
var breakLine = "<br>";
var chartImages = [];
var tableContents =[];
// var legendText = [];
//Header and project details.
var projDetails = document.getElementById(projectDetails).children;
for (x =0;x<2;x++){
wordHtml = wordHtml + projDetails[x].innerHTML + breakLine;
}
//Print out the table and Chart content
var chartCount = document.getElementById(listofCharts).children.length;
var charts = document.getElementById(listofCharts).children;
//Navigate through each chart area.. add to canvas and add to word.
//Get the chart Details
for (crt=0; crt<chartCount;crt++){
var chartKids = (charts[crt].children)[0].children;
await html2canvas(chartKids[1]).then(canvas => {
var dataURL = canvas.toDataURL();
chartImages[crt] = "<img src = '"+dataURL+"'>";
});
}
//Get the table contents.
for (i = 0; i< chartCount;i++){
var chartKids = (charts[i].children)[0].children;
tableContents[i] = chartKids[0].innerHTML
}
//Combine all the above data in a nice format to show in word.
for(x=0;x<tableContents.length;x++){
wordHtml = wordHtml + tableContents[x] + breakLine;
wordHtml = wordHtml + chartImages[x] + breakLine;
//Retain the H1 tag here after the chart. This is used to create page Break.
wordHtml = wordHtml + "<h1> end of section </h1>" + breakLine;
}
var html = preHtml+ wordHtml + postHtml;
// console.log(html);
var blob = new Blob(['\ufeff', html], {
type: 'application/msword'
});
// Specify link url
var url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html);
}
</script>
</body>
</html>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|