how to add a logo properly in a pdf file with jspdf in vuejs?
I tried to use this addSvgAsImage function like this:
const doc = new jsPDF()
const logo = '/src/icons/svg/logo.svg'
doc.addSvgAsImage(logo, 20, 20, 50, 50, null, 'NONE', 0)
and I have this error:
canvg is not defined
at Object.et.addSvgAsImage
I finally used a png image like that:
const logo = require('#/icons/png/logo.png')
const doc = new jsPDF()
var imgLogo = new Image()
imgLogo.src = logo
doc.addImage(imgLogo, 'PNG', xCord, yCord, 24, 8)
Related
I am using jsPDF to convert HTML components into a PDF.
Below is the code for that,
var doc = new jsPDF({orientation: 'l',unit: 'px',format: [1250,1100],compress : true});
let component=document.getElementById('document');
doc.html(component,{
margin: [10, 0, 50, 0],
callback: function (doc) {
doc.save("report.pdf");
},
x: 0,
y: 0,
});
The resulting PDF looks like.
PDF PROBLEM
I expect jsPDF to move the component to the next page whenever its find that the size of the component is bigger than the rest of the current page.
I'm attempting to display Video.js captions on a custom DOM element, outside of the video playing. This works as intended and below are snippets showing this.
Unfortunately, I can't seem to disable captions appearing also on top of the video too. Is there a way to disable captions appearing/showing on top of the video and only in the TextTrackDisplay element?
Any setting in the caption options (addRemoteTextTrack(options)) and textTrackSettings.setValues() seems to affect both on-video and custom captions.
let captionOption = {
kind: 'captions',
srclang: 'en',
label: 'English',
src: subURL,
mode: 'showing',
};
connectTextTracks = (player) => {
const TextTrackDisplay = videojs.getComponent('TextTrackDisplay');
const textTrackDisplay = new TextTrackDisplay(player);
subtitleDiv.appendChild(textTrackDisplay.el());
}
player.ready(function () {
player.addRemoteTextTrack(captionOption);
const tracks = player.remoteTextTracks();
console.log(tracks.length); // print out greater than 0 if captions exists
var settings = this.textTrackSettings;
settings.setValues({
backgroundColor: '#000',
backgroundOpacity: '1',
edgeStyle: 'uniform',
});
settings.updateDisplay();
connectTextTracks(player);
});
I ended up just hiding the on-video text track display, before creating a new TextTrackDisplay, like so:
// First hide main text track display (on-video)
const mainTextTrackDisplay = player.getChild('TextTrackDisplay');
mainTextTrackDisplay.setAttribute("hidden", true);
// Add new text track display
const TextTrackDisplay = videojs.getComponent('TextTrackDisplay');
const newTextTrackDisplay = new TextTrackDisplay(player);
const newTextTrackDisplayEl = newTextTrackDisplay.el();
// Append new text track display to subdiv element
const subDiv = document.querySelector("#subdiv");
subDiv.append(newTextTrackDisplayEl);
Full example here:
https://codepen.io/avtconnect/pen/poOvEyj
const marker = document.createElement('div');
marker.innerHTML = `<img src="../../assets/FuelPin.png" style="height: 56px; width: 44px" alt=""/>`;
new mapboxgl.Marker(marker)
.setLngLat(lngLatPopup)
.addTo(this.map);
},
In the above code the src from img attribute is not loading the image. I tried using :src to bind as vue component but it is being rendered as string. My relative path to the image exists as well.
In general changing innerHTML with JavaScript is not something frameworks like Vue or React will let you do (see https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#security_considerations)
Here is the plain JS example from the Mapbox GL website:
const el = document.createElement('div');
const width = marker.properties.iconSize[0];
const height = marker.properties.iconSize[1];
el.className = 'marker';
el.style.backgroundImage = `url(https://placekitten.com/g/${width}/${height}/)`;
el.style.width = `${width}px`;
el.style.height = `${height}px`;
el.style.backgroundSize = '100%';
el.addEventListener('click', () => {
window.alert(marker.properties.message);
});
// Add markers to the map.
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.addTo(map);
From https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons/
One pro tip, if you have lots of images to load (like thousands of markers) you will get better performance if you have MapboxGL render it in WebGL vs using the DOM, for that see: https://docs.mapbox.com/mapbox-gl-js/example/add-image/
I am using jsPdf to export table data as pdf file, I have about 50 columns in my table.
but i am not able to see all columns in pdf. only few col are visible rest seems out of page, but there is no scrollbar in pdf file.
please suggest how to get a horizontal scrollbar on pdf page.
Below is my code snippet :
exportPDF(myTableHeaders,myTableData) {
const pdf = new jsPDF();
pdf.setFont("helvetica");
pdf.setFontSize(6);
;
let headerConfig = myTableHeaders.map((header) => ({
name: header.fieldName,
prompt: header.label,
width: 30,
align: "center",
fontSize: 6,
padding: 0,
}));
pdf.table(20, 30, myTableData, headerConfig);
pdf.save("pdf.pdf");
}
Below is snap :
I want to download my drawing on the React canvas as a jpeg image file to my desktop, and then pass it to a python file for classification. Can someone specify a code to download the React canvas drawing, or suggest a better way to implement the idea?
clearCanvas({nativeEvent}) {
var image = this.canvas.toDataURL("image/jpeg");
nativeEvent.href=image;
this.ctx.save("C:/Users/PrishitaRay/Pictures/Myimage.jpeg");
this.ctx = this.canvas.getContext('2d');
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
This function just clears the react canvas without downloading it first.
After reading your code, I'm not sure if its related to React. Therefore I'm going to give a non-react solution.
In case you have done some drawing on the canvas like my exampleDrawing function, then just call download function like this.
function exampleDrawing(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
}
function download(){
var canvas = document.getElementById("canvas");
var url = canvas.toDataURL("image/png");
var link = document.createElement('a');
link.download = 'filename.png';
link.href = url;
link.click();
}
exampleDrawing();
<canvas id="canvas" width="200" height="100">
</canvas>
<button onclick="download();">Download!</button>
What my download function do is to create a URL that contains the canvas's image, generate a link, and then click on it.
And of course you don't have to generate a button and click on it. Just call the download function whenever you want.
Download Canvas as Image in React (Js only): (React Class Components)
Download As Image Function: chartRef.canvas gives the canvas element, replace it with your Canvas element.
handleChartDownload = (chartRef) => {
const chartCanvas = chartRef.canvas;
if (chartCanvas) {
const url = chartCanvas.toDataURL("image/png");
const link = document.createElement("a");
link.download = "chart.png";
link.href = url;
link.click();
}
};
Graph Element: these elements comes under render() function.
Download Button:
<button
className="btn btn-light"
onClick={() => this.handleChartDownload(this.chartRef)}
>Download</button>
Graph: (here Scatter is ChartJsReact component, used for creating graphs)
<Scatter
ref={(reference) => (this.chartRef = reference)}
data={this.state.chartData}
options={this.state.chartOptions}
/>