I have this button
<button
className="rounded border px-4 py-2"
onClick={() => {
const doc = new jsPDF();
doc.html(document.querySelector(".invoice-box"), {
callback: function (pdf) {
console.log("lol", pdf);
pdf.save("invoice.pdf");
},
margin: 0,
});
}}>
Print
</button>
when I log the pdf it's working well, but... nothing happens!
Does someone know in Tauri how to create a pdf from html then print it?
Related
I'd like to add a hyperlink in a editor, like vscode does:
I'd like to add this formatted document and when you click into it, some operation happens, open a file dialog, for example.
I have no code to show yet because I didn't find anything like that yet, only for regular text that goes like this:
const line = editor.getPosition();
if(!line) {
throw new Error('line is null');
}
const range = new monaco.Range(line.lineNumber, 1,
line.lineNumber, 1);
const text = "empty tab";
const op: monaco.editor.IIdentifiedSingleEditOperation = {
range: range,
text: text,
forceMoveMarkers: true
};
editor.executeEdits('my-source', [op]);
but I didn't see how add a format it.
You can use an overlay element and define the placeholder content in HTML, with links that will perform actions (e.g. change the editor theme, change the language etc).
The HTML for the placeholder would look something like this:
<div class="monaco-placeholder">
This is a test placeholder that will disappear when you click into the editor.
Click
here
first if you want to change the editor language from HTML to JavaScript, or click
here
if you want to change the editor theme
</div>
Along with the following CSS:
.monaco-placeholder {
color: darkturquoise;
display: none;
position: absolute;
top: 0;
left: 65px;
pointer-events: all;
z-index: 1;
opacity: 0.7;
}
You can then wire this up in JavaScript as follows:
Functions to hide and show the placeholder:
function showPlaceholder() {
document.querySelector(".monaco-placeholder").style.display = "initial";
}
function hidePlaceholder() {
document.querySelector(".monaco-placeholder").style.display = "none";
}
Create the editor and show the placeholder:
const instance = monaco.editor.create(document.getElementById('container'), {
value: "",
language: 'html'
});
showPlaceholder();
Add event handlers for any links in the placeholder that you want to perform actions when clicked:
document.getElementsByClassName('change-language')[0].addEventListener('click', (e) => {
e.stopPropagation();
var model = instance.getModel();
monaco.editor.setModelLanguage(model, "javascript")
console.log('language successfully changed to JavaScript')
});
document.getElementsByClassName('change-theme')[0].addEventListener('click', (e) => {
e.stopPropagation();
monaco.editor.setTheme('vs-dark')
console.log('theme successfully changed')
});
Event handler to clear the placeholder and focus into the editor when the user clicks on any part of the placeholder apart from the links:
document.getElementsByClassName('monaco-placeholder')[0].addEventListener('click', () => {
hidePlaceholder();
instance.focus();
});
If you copy the HTML, CSS and JavaScript below into the Monaco Playground, you will see this working:
HTML
<div id="container" style="height: 100%"></div>
<div class="monaco-placeholder">
This is a test placeholder that will disappear when you click into the editor.
Click
here
first if you want to change the editor language from HTML to JavaScript, or click
here
if you want to change the editor theme
</div>
CSS
.monaco-placeholder {
color: darkturquoise;
display: none;
position: absolute;
top: 0;
left: 65px;
pointer-events: all;
z-index: 1;
opacity: 0.7;
}
JavaScript
const instance = monaco.editor.create(document.getElementById('container'), {
value: "",
language: 'html'
});
showPlaceholder();
function showPlaceholder() {
document.querySelector(".monaco-placeholder").style.display = "initial";
}
function hidePlaceholder() {
document.querySelector(".monaco-placeholder").style.display = "none";
}
document.getElementsByClassName('monaco-placeholder')[0].addEventListener('click', () => {
hidePlaceholder();
instance.focus();
});
document.getElementsByClassName('change-language')[0].addEventListener('click', (e) => {
e.stopPropagation();
var model = instance.getModel();
monaco.editor.setModelLanguage(model, "javascript")
console.log('language successfully changed to JavaScript')
});
document.getElementsByClassName('change-theme')[0].addEventListener('click', (e) => {
e.stopPropagation();
monaco.editor.setTheme('vs-dark')
console.log('theme successfully changed')
});
Using Net MVC and Signaturepad, I´m taking a signature from users and generating a PNG by using this:
<canvas id="#("canvas" + flat.ID)" width="400" height="200" style="background-color: lightgrey;"></canvas>
<script type="text/javascript">
var canvas = document.querySelector("#("#canvas" + flat.ID)");
var signaturePad = new SignaturePad(canvas, {
backgroundColor: 'rgba(211,211,211, 1)',
penColor: 'rgb(0, 0, 0)'
});
</script>
I´m storing the signature in a database by using
<button class="btn btn-shadow btn-block btn-primary" onclick="saveSignature('#Url.Action("SaveSignature", "Home", new { Area = "AssemblyOrders" })', signaturePad.toDataURL(), '#flat.ID', '#ViewBag.AssemblyOrderID')">Speichern</button>
This does nothing but setting the value in database.
In database I find the generated string:
data:image/png;base64,iVBORw...
I´m loading the view and if the viewmodel has that string I´m displaying it as an image:
<img src="#flat.Signature" style="width: 100%; height: 200px;"/>
This is only showing the lightgrey background from signaturepad but not the handwritten signature.
Where is the problem?
edit: I also tried saving it to desktop, but this png is also only lightgrey without lines.
Problem were this lines of code:
var signaturePad = new SignaturePad(canvas, {
backgroundColor: 'rgba(211,211,211, 1)',
penColor: 'rgb(0, 0, 0)'
});
Because of multiple canvas, as you can see from <canvas id="#("canvas" + flat.ID)" ..., the var signaturePad existed multiple times. Thus always the last var was used.
I solved it like this:
var pads = {};
...
pads["#("#canvas" + flat.ID)"] = new SignaturePad(canvas, {
backgroundColor: 'rgba(211,211,211, 1)',
penColor: 'rgb(0, 0, 0)'
});
and
onclick="saveSignature('#Url.Action("SaveSignature", "Home", new { Area = "AssemblyOrders" })', pads['#("#canvas" + flat.ID)'].toDataURL(), '#flat.ID', '#ViewBag.AssemblyOrderID')"
I am new to monaco editor and its' really good. I just noticed that it doesn't work on text box control.
it's working on div
<div id="ComponentTemplateHTML" style="width:1000px;height:600px;border:1px solid grey"></div>
but in text box or text area it's not working
<textarea asp-for="ComponentTemplateHTML" style="width:1000px;height:600px;border:1px solid grey"></textarea>
require.config({ paths: { 'vs': '../../lib/monaco-editor/min/vs' } });
require(['vs/editor/editor.main'], function () {
monaco.editor.create(document.getElementById("ComponentTemplateHTML"), {
language: "css",
scrollbar: {
vertical: 'auto',
horizontal: 'auto'
}
});
Just copy contents from div to textarea when form is submitted so it will be send out with form as an input. Remember to make that textarea hidden or make that textarea dynamically.
jQuery Example
$( "#your-form-id" ).submit(function( event ) {
$ ('#your-textarea-id').val( $('#your-monaco-div-id') );
});
A screenshot : http://d.pr/i/A4Kv
This is my dialog code:
function popupbox(title,html,buttonTxt,buttonAction) {
var buttons = {};
if(buttonTxt != null) {
buttons[buttonTxt] = buttonAction;
}
buttons['Cancel'] = function() {
jQuery(this).dialog('destroy').remove();
};
var p = jQuery('<form class="dialoginnerbox">' + html + '</form>');
p.dialog({
autoOpen: false,
resizable: false,
modal: false,
width: 'auto',
height: 'auto',
maxHeight: 600,
maxWidth: 980,
title: title,
close: function(event, ui){
jQuery(this).dialog('destroy').remove();
},
buttons: buttons
});
p.dialog('open');
}
Any ideas?
---- UPDATE ----
I swapped out the returning html for some dummy text and that fixed it.. so something with the html that is being put into the popup is making it open twice...
Malformed html and inline script tags cause jquery ui dialog to open multiple dialogs.
With jQueryUI dialogs; jQuery may consider valid html as malformed html in some cases. The reason I say this is I ajax loaded the html for my dialog with valid html and valid html comments. I got double dialog boxes until I removed the html comments from the ajax loaded html. Example...
content.htm
<div id="myDialogContent">Alert!</div><!-- Here is an innocent looking comment -->
dialog.js
$.get( '/content.htm', function( html ){
$( html ).dialog();
});
This would produce a double dialog. If the html begins or ends with an html comment, the same dialog issue occurs. The only way around is to either remove the html comment or wrap the html text in another html tag like so...
dialog.js
$.get( '/content.htm', function( html ){
$( '<div>'+html+'</div>' ).dialog();
});
This would produce one dialog.
function display_dialog() { if($('.dialog_wrapper').length) {
return;
}
$('<div class="dialog_wrapper"</div>').dialog({
autoOpen: true,
modal: true,
A workaround for this problem is to use a counter:
var count = 0;
var $dialog = $('<div></div>') .dialog({ ...
autoOpen: false,
modal: true,
height: 625,
width: 500,
title: pagetitle
...
});
if (count > 0) {
$dialog.dialog("destroy").remove();
count = 0;
}
$dialog.dialog('open');
count++;
worked for me... for the dialog issue, but i am getting multiple requests on the server ...
something like that: when i click for the first time on the link, it sends on information to the server. When i click for the second time (without refreshing the browser) it sends the same information twice. When i click for the third time, three requests are sent to the server, and so on...
If you wrap your html in a single tag, it may clean it up.
The inclusion of divs inside the html may cause a dialog for each one unless there's a layer above:
This didn't work for me:
<hr /> blah blah blah
<h3>blahblahtitle</h3>
<div id=somestufffirst>here's the stuff</div>
<div id=someotherstuff>here's some more stuff</div>
But this did:
<div>
<hr /> blah blah blah
<h3>blahblahtitle</h3>
<div id=somestufffirst>here's the stuff</div>
<div id=someotherstuff>here's some more stuff</div>
</div>
I have a cakephp view (index.ctp) where I have edit button. On button edit I want the jquery dialog box open with what i have in edit.ctp. (Currently if I go to edit.ctp, it works fine but I am trying to use model / dialog box so the user stays on same page)
This is what I have in my index.ctp
<td>
<?php echo $this->Html->link($team['Company']['name'], array('action' => 'edit_reload','team_id'=>$team['Team']['id']), array('id'=>"dialog_link", 'class'=>"ui-state-default ui-corner-all"));?>
</td>
<div id="dialog" title="Dialog Title">
</div>
Now when the link clicked I want to show the edit_reload.ctp contents here. I am totally exhausted so any help will be appreciated
thanks
In a separate JS file write the following code and add your values to the variables and include the JS file in your .ctp file.
$(document).ready(function() {
$myWindow = $('#dialog');
//instantiate the dialog
$myWindow.dialog({ height: 250,
width: 200,
modal: true,
position: 'center',
autoOpen:false,
title:'',
overlay: { opacity: 0.5, background: 'black'}
});
$J("#dialog_link").click( showDialog );
});// end (document).ready
var showDialog = function() {
var team_id = '';
var url = '/controller/action/' + team_id;//Apply path to controller, action
$.post(url, function(res) {
$myWindow.dialog({
title:'Give Title'
});
$('#dialog').html(res);
$myWindow.show();
});
}
In .ctp file use the link as follows-
echo $this->Html->link($team['Company']['name'],'#', array('id'=>"dialog_link", 'class'=>"ui-state-default ui-corner-all"));
I have show you an example.You can also write the js code in the .ctp file also.