This question already has answers here:
Write raw html code inside kotlinx.html DSL
(3 answers)
Closed 3 months ago.
just like below, using html DSL to respond, but some fragment came from markdown rendering, I hope raw html text could be part of dom, how could I handle this case.
Of cause, there would have no this problem if using FreeMarker.
val rawHtml = renderHtmlFromMarkdown(mdText) // "<p>That came from raw Html</p>"
call.respondHtml(HttpStatusCode.OK) {
head {
title {
+name
}
}
body {
h1 {
+"Hello from $name!"
}
// raw html injection
}
}
expected response:
<html>
<head>
<title>Ktor</title>
</head>
<body>
<h1>Hello from Ktor!</h1>
<p>That came from raw Html</p>
</body>
</html>
Got it! just use unsafe extension:
val rawHtml = renderHtmlFromMarkdown(mdText)
call.respondHtml(HttpStatusCode.OK) {
head {
title {
+name
}
}
body {
h1 {
+"Hello from $name!"
}
unsafe {
raw(rawHtml)
}
}
}
and is the same answer of this one
Related
Using the new jsPDF .html() pretty much pulled straight from their docs, but it still results in a blank page:
Results in blank page:
function saveDoc() {
window.html2canvas = html2canvas
const doc = document.getElementById('doc')
if (doc) {
var pdf = new jsPDF('p', 'pt', 'a4')
pdf.html(doc.innerHTML, {
callback: function (pdf) {
pdf.save('DOC.pdf');
}
})
}
}
Results in no PDF generated:
function saveDoc() {
window.html2canvas = html2canvas
const doc = document.getElementById('doc')
if (doc) {
var pdf = new jsPDF('p', 'pt', 'a4')
pdf.html(doc.innerHTML, {
function (pdf) {
pdf.save('DOC.pdf');
}
})
}
}
Also results in blank page:
function saveDoc() {
window.html2canvas = html2canvas
const doc = document.getElementById('doc')
if (doc) {
var pdf = new jsPDF('p', 'pt', 'a4')
pdf.html(doc, {
callback: function (pdf) {
pdf.save('DOC.pdf');
}
})
}
}
Will use another tool if there are any other suggestions. Need it to be secure and generate selectable text PDF to keep overall size down. It's a long document it's generating and when doing it via addImage() the resulting file is huge. Thoughts?
After trying whole day came with following solution. I think we are getting blank page because of versions of html2canvas. I was using updated jspdf(1.5.3) with html2canvas(1.0.0-rc.3). Due to this I was getting blank pdf. When I use html2canvas(1.0.0-alpha.12) with jspdf(1.5.3) I am getting pdf with contents(not blank). So better to change version of html2canvas in order to work with newly .html() method.
// scripts included
<script type="text/javascript" src="html2canvas.js"></script> // 1.0.0-alpha.12 downloaded
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
//html
<div id='doc'>
<p>Hello world</p>
<div class="first-page">
<h1>bond</h1>
<img src="1.png"/>
</div>
<div class="second-page">
<img src="2.png"/>
</div>
</div>
<button onclick="saveDoc()">click</button>
// javascript
<script type="text/javascript">
var pdf = new jsPDF('p', 'pt', 'a4');
function saveDoc() {
window.html2canvas = html2canvas
const doc = document.getElementsByTagName('div')[0];
if (doc) {
console.log("div is ");
console.log(doc);
console.log("hellowww");
pdf.html(document.getElementById('doc'), {
callback: function (pdf) {
pdf.save('DOC.pdf');
}
})
}
}
</script>
html2canvas 1.0.0 alpha.12
.html() not working github
For me the working solution was to add the callback/promise behavior --- pdf.html(doc).then(() => pdf.save('fileName.pdf')); Seems that html() method works async and the file to be downloaded was not ready when downloading based on the other example --- that's why it was empty.
I keep getting this error: TypeError: Scraper.dumpTitle is not a function
And I can't figure out why...
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kotlin JS Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<script src="out/production/lib/kotlin.js"></script>
<script src="out/production/Scraper.js"></script>
<!--<script>-->
<!--function loaded() {-->
<!--}-->
<!--</script>-->
<script>
$(function() {
Scraper.dumpTitle(document)
})
</script>
</body>
</html>
Main.js
import kotlin.browser.document
/**
* *
* * -
*/
fun main(args: Array<String>) {
println("Hello")
}
fun dumpTitle(doc: dynamic) {
println(doc.title)
}
fun dumpTitle1() {
println(document.title)
}
generated js
if (typeof kotlin === 'undefined') {
throw new Error("Error loading module 'Scraper'. Its dependency 'kotlin' was not found. Please, check whether 'kotlin' is loaded prior to 'Scraper'.");
}
var Scraper = function (_, Kotlin) {
'use strict';
var println = Kotlin.kotlin.io.println_s8jyv4$;
function main(args) {
println('Hello');
}
function dumpTitle(doc) {
println(doc.title);
}
function dumpTitle1() {
println(document.title);
}
_.main_kand9s$ = main;
_.dumpTitle_za3rmp$ = dumpTitle;
_.dumpTitle1 = dumpTitle1;
Kotlin.defineModule('Scraper', _);
main([]);
return _;
}(typeof Scraper === 'undefined' ? {} : Scraper, kotlin);
notes
calling dumpTitle1() works fine.. so the problem I have is only with passing parameters
no need to point out that I can access the document variable in Kotlin without needing to pass it, I know... but I wanted to pass another document object to use
If you're calling a Kotlin function from JavaScript, you need to use the #JsName annotation to give it a stable name. See here for documentation.
#JsName("dumpTitle")
fun dumpTitle(doc: dynamic) {
println(doc.title)
}
I have been developing an application which need to handle an external variable which is defined in my index.html inside <script> tag and window scope. I need to access that in my typescript file to do some operation but during compile its showing error as shown below.
//index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<script>
window.widgetResources = {
'sessionId': '2f60e0a2-3fa2-46f4-9a5c-4a8afe5007c8',
'staticResourceURL': 'http://localhost:9090/OfferFinder/16101/1/0/',
'offers': {
</script>
</head>
<body>
<app>loadings...</app>
</body>
</html>
//WidgetResourcesList.js
export class WidgetResourcesList {
//noinspection TypeScriptUnresolvedVariable
widgetResources = window.widgetResources;
}
//error getting
C:\quickstart>tsc
app/services/WidgetResourcesList.ts(5,28): error TS2339:
`Property 'widgetResources' does not exist on type 'Window'.`
Simple
declare global {
interface Window {
widgetResources: {
sessionId: string,
staticResourceUrl: string,
offers: {}
};
}
}
export class WidgetResourcesList {
widgetResources = window.widgetResources;
}
here is my code
var parser = window.less.Parser();
try{
parser.parse(aztp_css_editor.getValue(), function(error, result){
if(!error){
alert(result.toCSS());
}else{
alert(error);
}
});
}catch(error){
alert(error);
}
I have a mixins less file here http://lessprefixer.com/ for shorthand css3 prefix, how I setup it into my parse less code?
I think you should better the less.render function, see also: http://lesscss.org/usage/#programmatic-usage.
But indeed you can use the #import directive as already made clear by #seven-phases-max.
Example:
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/less.min.js"></script>
<script>
less.render('#import "test.less"; p {color: #red; }', {'include-path': 'test/'})
.then(function(output) {
// output.css = string of css
// output.map = string of sourcemap
// output.imports = array of string filenames of the imports referenced
console.log(output.css);
},
function(error) {
});
</script>
The above compiles well (results in output.css) when test.less is available in the same path as the html which contains the code. You can also use a path in your import, '#import "path/test.less"; I did not found that setting include-path has any effect.
I'm a beginner in dojo, and I'm trying to print the output to console using dojo code. But I don't what's the problem in the following code, and how can I print the output to the console?
<html>
<head>
<script type = "text/javascript" src = "dojo/dojo.js" data-dojo-config = "async: true, isDebug : true" >
</script>
</head>
<body>
<h1 id = "greeting">Hello</h1>
<script>
define(["dojo/dom"],function(dom) {
var Twitter = declare(null, {username:"defaultusername",
say :function(msg)
{
console.log("Hello "+msg);
}
});
var myInstance = new Twitter();
myInstance.say("Dojo");
});
</script>
</body>
</html>
Use require instead of define:
<script>
require(["dojo/dom", "dojo/_base/declare"], function(dom, declare) {
var Twitter = declare(null, {
username: "defaultusername",
say :function(msg) {
console.log("Hello "+msg);
}
});
var myInstance = new Twitter();
myInstance.say("Dojo");
});
</script>
Console works, but your code inside callback function in declare is not being executed until you require it.
You cannot define in inline script code, that is meant to be a class define, put in the topmost line of a class-file, meaning define maps the filename to the returned value of its function.
This means, if you have
dojo_toolkit /
dojo/
dijit/
dojox/
libs/
myWidgets/
foo.js
And foo.js reads
define(["dijit._Widget"], function(adijit) {
return declare("libs.myWidgets.foo", [adijit], function() {
say: function(msg) { console.log(msg); }
});
});
Then a new module is registered, called libs / myWidgets / foo. You should make sure that the returned declare's declaredClass inside each define matches the file hierachy.
That being said, reason why define does not work for you is the explaination above. It is inline and has no src to guess the declaredClass name from. Rewrite your code to define("aTwitterLogger", [":
define("aTwitterLogger", ["dojo/_base/declare", "dojo/dom"],function(declare, dom) {
var Twitter = declare(null, {
username:"defaultusername",
say :function(msg)
{
console.log("Hello "+msg);
}
});
var myInstance = new Twitter();
myInstance.say("Dojo");
});