sapui5视频帧图到pdf发布
sapui5视频帧图到pdf发布
提问于 2018-09-05 10:14:15
我无法使用vizFrame将图形转换成PDF格式，在sapui5中使用1.28.30版本不能因为客户端而更改版本。这是我的代码，请检查并请帮助。
我得到一半的图表作为结果PDF。为此，我导入了所需的所有库，如canvgg、jsPdf、rgbColor、stackblur.js。
pressToPdf:function(oEvent){
var oVizFrame = thatgrowth.getView().byId("ID_GROWTH_CHART_LENGTH_SCALE");
var id = thatgrowth.getView().byId("ID_GROWTH_CHART_LENGTH_SCALE").sId
var svg = $("#"+id).find("svg.v-m-root").outerHTML()
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, 600, 450);
canvgg(canvas, svg);
var imgData = canvas.toDataURL('image/png');
// Generate PDF
var doc = new jsPDF('p', 'pt', 'a4');
doc.addImage(imgData, 'PNG', 0, 0, 600, 450);
doc.save('GrowthChart.pdf');
},回答 2
Stack Overflow用户
回答已采纳
发布于 2018-09-06 09:24:04
工作代码示例：
pressToPdf:function(oEvent){
var oVizFrame = thatgrowth.getView().byId("ID_GROWTH_CHART_LENGTH_SCALE");
var svg = oVizFrame.getDomRef().getElementsByTagName("svg")[1];
var canvas = document.createElement('canvas');
var bBox = svg.getBBox();
canvas.width = bBox.width;
canvas.height = bBox.height;
var context = canvas.getContext('2d');
context.fillstyle = "rgb(255,255,255)"; //Set the context background
context.fillRect(0, 0, canvas.width, canvas.height); //Apply background to chart rect
var imageObj = new Image();
imageObj.onload = function()
{
context.drawImage(imageObj, 0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL('image/jpeg'); //Save as JPEG instead of base64
var doc = new jsPDF('l', 'mm', 'a4'); //A4 landscape 297 x 210
var imgHeigth = 190 * (bBox.height / bBox.width);
doc.addImage(dataURL, 'JPEG', 10, 20, 227, 180); //Download full page chart as PDF
doc.save('chart_in_pdf');
};
imageObj.src = "data:image/svg+xml," +
jQuery.sap.encodeURL(svg.outerHTML.replace(/^svg/,
'<svg xmlns="https://www.w3.org/2000/svg" version="1.1"'));
},Stack Overflow用户
发布于 2018-09-05 10:29:49
您的PDF是A4大小；它是595x842(假设它是72 PPI)。但是你的图像Canvas是600 x 450。这就产生了问题。尝试减少传递给Canvas方法的doc.addImage大小。喜欢,
doc.addImage(imgData, 'PNG', 0, 0, 590, 450);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52182625
复制相关文章
相似问题
腾讯云开发者
