Html2pdf.js result is blank PDF in vue - javascript

I have a vue component and I want to convert this component to PDF file. I used html2pdf.js package but the result is a blank PDF with 3 pages. How can I make it work?
<template>
<div>
<div ref="document">
<h2> hello</h2>
</div>
<button class="btn btn-success text-center" #click="createPDF"> دریافت فایل pdf</button>
</div>
</template>
<script>
import html2pdf from 'html2pdf.js'
export default {
data(){
return{
}
},
props : ['result'] ,
watch: {
},
methods: {
createPDF () {
html2pdf(this.$refs.document, {
margin: 1,
filename: 'document.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { dpi: 192, letterRendering: true , scale: 1 , useCORS: true},
jsPDF: { unit: 'in', format: 'a4', orientation: 'landscape' }
})
}
}
}

Related

React ckeditor typeerror: cannot read properties of null reading 'getattribute'

typeerror: cannot read properties of null reading 'getattribute'
I am working on the React project using CkEditor.
I want to customize the tool of CkEditor
When I looked up the official document, I read that the existing package should be included, I finished installing additional, and there are currently no errors in the vcode.
By the way, the error below appears in the console window because "Ckeditor" is not rendered on the screen after starting npm, so can I ask for your advice?
Error Code
My code
import React from 'react';
import { CKEditor } from '#ckeditor/ckeditor5-react';
import DecoupledEditor from '#ckeditor/ckeditor5-editor-decoupled/src/decouplededitor';
import Essentials from '#ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '#ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '#ckeditor/ckeditor5-basic-styles/src/bold';
...
interface EditorProps {
data: any;
onChange: any;
uploadFolder?: string;
uploader?: string;
}
const Editor = ({
data,
onChange,
uploadFolder = '',
uploader = '',
}: EditorProps) => {
return (
<div>
<CKEditor
data={data}
onChange={onChange}
editor={DecoupledEditor}
onReady={(editor: any) => {
editor.ui
.getEditableElement()
.parentElement.insertBefore(
editor.ui.view.toolbar.element,
editor.ui.getEditableElement(),
);
}}
config={{
plugins: [
Essentials,
Paragraph,
Bold,
...
],
toolbar: [
'heading',
'|',
'bold',
...
],
fontSize: {
options: [19, 'default', 21....],
},
alignment: {
options: ['justify', 'left', 'center', 'right'],
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells',
'tableProperties',
'tableCellProperties',
],
},
image: {
resizeUnit: 'px',
toolbar: [
'imageStyle:alignLeft',
'imageStyle:full',
'imageStyle:alignRight',
'|',
'imageTextAlternative',
],
styles: { options: ['full', 'alignLeft', 'alignRight'] },
upload: { types: ['JPEG', 'JPG', 'GIF', 'PNG'] },
},
simpleUpload: {
uploadUrl: '/uploadFile',
withCredentials: true,
headers: {
'upload-folder': uploadFolder || 'root',
'upload-editor': uploader || '',
},
},
}}
/>
</div>
);
};
export default Editor;

How to use vue-quill image compressor module

I'm using the BlotFormatter module with vue-quill. And it is working. I tried to add the image compressor module too and upload a large image but it is not being compressed. I think I have done something wrong. This is the way I included it in my project,
<script setup>
import { QuillEditor } from "#vueup/vue-quill";
import ImageCompress from "quill-image-compress";
import BlotFormatter from "quill-blot-formatter";
import "#vueup/vue-quill/dist/vue-quill.snow.css";
const modules = {
name: "blotFormatter",
module: BlotFormatter,
options: {
/* options */
},
imageCompress: {
quality: 0.7, // default
maxWidth: 1000, // default
maxHeight: 1000, // default
imageType: "image/jpeg", // default
debug: true, // default
suppressErrorLogging: false, // default
insertIntoEditor: undefined, // default
},
};
</script>
<template>
<QuillEditor
ref="quillEditorRef"
v-model:content="articleForm.description"
theme="snow"
toolbar="full"
contentType="html"
:modules="modules"
/>
</template>
Really appreciate it if somebody could guide me to install this module properly. Thanks
Just put the modules inside an array.Separate all modules as objects.
const modules = [
{
name: "ImageCompress",
module: ImageCompress,
options: {
quality: 0.7, // default
maxWidth: 1000, // default
maxHeight: 1000, // default
imageType: "image/jpeg", // default
debug: true, // default
suppressErrorLogging: false, // default
insertIntoEditor: undefined, // default
},
},
{
name: "BlotFormatter",
module: BlotFormatter,
options: {},
},
];const modules = [
{
name: "ImageCompress",
module: ImageCompress,
options: {
quality: 0.7, // default
maxWidth: 1000, // default
maxHeight: 1000, // default
imageType: "image/jpeg", // default
debug: true, // default
suppressErrorLogging: false, // default
insertIntoEditor: undefined, // default
},
},
{
name: "BlotFormatter",
module: BlotFormatter,
options: {},
},
];

html pages come scattered between pages when i print them with html2pdf library in javascript

html2pdf is printing a pdf but the write is choppy between pages how to solve?
this my code javascript if you need to html i can comment it,
any one have an idea ? please help me!
<script>
window.onload = function () {
document.getElementById("download")
.addEventListener("click", () => {
const invoice = this.document.getElementById("invoice");
console.log(invoice);
console.log(window);
var opt = {
margin: 1,
filename: 'myfile.pdf',
image: { type: 'png', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'pt', format: 'a4', orientation: 'landscape'}
// p\init : pt unit: 'in', format: 'letter', orientation: 'landscape'
};
html2pdf().from(invoice).set(opt).save();
})
}
</script>
that is screenshot from pdf for more clarification
https://i.stack.imgur.com/eSdId.png

Vue.js vue-video-player renders 100px wide

I have begun integrating vue-video-player. The player renders at only 100px wide. I don't know why or how to change it.
I have not been able to find anything in the documentation. In fact, the inclusion of css files was a little confusing and I'm uncertain if my import (versus the require in the docs) is correct.
How can I set the width of the player?
<template>
<div>
<video-player
ref="videoPlayer"
:options="playerOptions"
:playsinline="true"
>
</video-player>
</div>
</template>
<script>
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
export default {
name: 'foo',
components: {
videoPlayer,
},
data () {
return {
playerOptions: {
muted: true,
language: 'en',
playbackRates: [1.0],
sources: [{
type: "video/mp4",
src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
}],
poster: "/static/images/defaults/image.png",
}
}
},
}
</script>
in the playerOptions set the width and height
playerOptions: {
// videojs options
muted: true,
language: 'en',
techOrder: ['html5', 'flvjs'],
playbackRates: [0.7, 1.0, 1.5, 2.0],
width: '800px',
height: '800px',
plugins: {
},
flash: {
swf: './#/assets/video-js.swf'
},
poster: './#/assets/logo.png',
sources: [
]
}
}

Plotly.js modebar, download as png, give png a name

I have a Plotly on my webpage and you can download it as a png by clicking the picture icon in the modebar. However when I click it, it downloads it as a png with the name new-plot, how can I give it a custom name?
My current code (var data is just data, so left it out) :
var layout = {
showlegend: true,
legend: {
x: 0,
y: 1
},
xaxis: {
title: 'Date',
titlefont: {
family: 'Courier New, monospace',
size: 18,
color: '#7f7f7f'
}
},
yaxis: {
title: 'Sales',
titlefont: {
family: 'Courier New, monospace',
size: 18,
color: '#7f7f7f'
}
}
};
var options = {
scrollZoom: true,
showLink: false,
modeBarButtonsToRemove: ['zoom2d', 'pan', 'pan2d', 'sendDataToCloud', 'hoverClosestCartesian', 'autoScale2d'],
displaylogo: false,
displayModeBar: true,
};
Plotly.newPlot('tester', data, layout, options);
Use Plotly.downloadImage
https://plot.ly/javascript/plotlyjs-function-reference/#plotlydownloadimage
Add this to your modebar setup for the button callback:
Plotly.downloadImage({
filename: 'customNamedImage',
format: 'png', //also can use 'jpeg', 'webp', 'svg'
height: 500,
width: 500
});
Edit:
I ran a custom example and I think you will want to custimze your own download button in the modebar, like so:
Plotly.newPlot(gd, [{
y: [1, 2, 1],
line: { shape: 'spline' }
}], {
title: 'custom modebar button',
width: 400,
height: 700
}, {
showTips: false,
displayModeBar: true,
modeBarButtons: [[{
name: 'custom download button',
icon: Plotly.Icons.camera,
click: function (gd) {
Plotly.downloadImage(gd, {
filename: 'your_custom_name',
format: 'jpeg',
width: gd._fullLayout.width,
height: gd._fullLayout.height
})
}
}, 'toImage'
], []]
})
There's an easier way to do this in newer versions of Plotly (v1.38+). Use the toImageButtonOptions parameter in the config like this:
Plotly.newPlot(graphDiv, data, layout, {
toImageButtonOptions: {
filename: 'image_filename',
width: 800,
height: 600,
format: 'png'
}
});
You can leave out options you don't need to use the defaults.

Categories