Question

我在弹出窗口中显示来自服务器的数据响应。我正在尝试使用pdfmake插件将该数据下载为pdf。数据生成为pdf，但具有挑战性的是我需要生成pdf文件，就像在html页面中一样。我从html弹出窗口附加了一个示例数据。

我的JS代码

$scope.download_pdf = function(questions,temptitle,extid,info){
        var content = [];
        var today = moment().format('lll');
        var docDefinition = {
           content: content,
            styles: {
                header: {
                    fillColor: '#6faadc',
                    color:'#18b0ff',
                    fontSize:16,
                    bold: true,
                    margin:[5,35,0,0]
                },
                questionStyle: {
                    width: '100%',
                    fontSize: 13,
                    bold: true,
                    margin:[5,20,20,0],
                },
                answerStyle: {
                    width: '100%',
                    fontSize: 13,
                    margin:[20,10,0,0],
                    color:'#57585a'
                },
                date: {
                    color:'#57585a'
                }
            }
         };



        content.push({image:compLogo,width:100,margin:[5,0,0,0],alignment: 'left' });       
        content.push({text: today,style: 'date',regular: true,fontSize: 10,margin:[0,-20,0,0],alignment: 'right'})      
        content.push({text: $scope.labelForexternalId+": "+extid,style: 'date',regular: true,fontSize: 10,margin:[5,80,0,0],alignment: 'left'})     
        content.push({text: $scope.labelForadditionalInfo+": "+info,style: 'date',regular: true,fontSize: 10,margin:[5,10,0,0],alignment: 'left'})      
        content.push({ text: temptitle, style: 'header' })

        if($scope.QuestTemplateAnswer[0]['isApproved'] == true || $scope.isVerified == true){
            var validatedBy = "Approved by: "+$scope.QuestTemplateAnswer[0]['validatedBy']+ " on "+moment($scope.QuestTemplateAnswer[0]['updatedAt']).format('ll');
            content.push({text: validatedBy,style: 'date',regular: true,fontSize: 9,margin:[5,0,0,0]})  
        }
        for(var i = 0; i < questions.length; i++){
            var index = i + 1
            content.push({ text: index+'. '+questions[i].question, style: 'questionStyle' })
            if(questions[i].answers){
                for(var j = 0; j < questions[i].answers.length; j++){
                    content.push([{ text: questions[i].answers[j].answer, style: 'answerStyle' }])
                }
            }else if(questions[i].answer){
                content.push({ text: questions[i].answer, style: 'answerStyle' })
            }else if(questions[i].files && questions[i].files.length > 0){          
                for(var k = 0; k < questions[i].files.length; k++){
                    content.push({image:$scope.content_images[i][k],width:300,height:200,margin:[20,10,0,0],alignment: 'left'})
                    content.push({ text: questions[i].files[k].caption, style: 'answerStyle' })                 
                }
            }
            if(questions[i].subQuestion){
                content.push({ text: index+'. '+questions[i].subQuestion.question, style: 'questionStyle',  margin:[15,20,20,0]})
                if(questions[i].subQuestion.answers){
                    for(var j = 0; j < questions[i].answers.length; j++){
                        content.push([{ text: questions[i].subQuestion.answers[j].answer, style: 'answerStyle', margin:[30,20,20,0]}])
                    }
                }else if(questions[i].answer){
                    content.push({ text: questions[i].subQuestion.answer, style: 'answerStyle', margin:[30,10,20,0]})
                }
            }

        }
    //  pdfMake.createPdf(docDefinition).open();       
        pdfMake.createPdf(docDefinition).download(temptitle+".pdf");//Create PDF        
    }

我需要生成与图像完全相同的pdf文件。请指导我如何做到这一点。

谢谢，桑卡尔。

Answer 1

你想要的是截取弹出窗口并将其设为pdf？如果这是一个适合我的例子：

1）首先你需要导入：

<!--html2canvas-->
<script type="text/javascript" src="~/Scripts/html2canvas.js"></script>

<!--PdfMAKER-->
<script type="text/javascript" src="~/Scripts/pdfmake.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>

2）在您的html代码中，它应该是这样的：

<div id="exportthis">
       <!--ALL YOUR HTML CODE OF YOUR POPUP-->
    </div>

3）在你的javascript代码中：

function imprimir() {
    html2canvas(document.getElementById('exportthis'), {
        onrendered: function (canvas) {
            var data = canvas.toDataURL();
            var docDefinition = {
                content: [{
                    image: data,
                    width: 500,
                }]
            };
            pdfMake.createPdf(docDefinition).download("Titulo.pdf");
        }
    });
}

描述：

我所做的是使用我想要的信息和样式加载de然后我有一个执行函数print（）的按钮。

让我知道它是否适合你，如果它没有检查我的例子，因为它可能会遗忘。

使用pdfmake生成带有文本格式的角度js的pdf

1 个答案: