Fatal编程技术网
  • javascript/
  • Javascript sm，如果您需要下载特定页面的pdf，请查看它们，只需添加如下按钮 <h4 onclick="window.print();"> Print </h4> 打印

Javascript sm，如果您需要下载特定页面的pdf，请查看它们，只需添加如下按钮 <h4 onclick="window.print();"> Print </h4> 打印

javascript

Javascript sm，如果您需要下载特定页面的pdf，请查看它们，只需添加如下按钮 <h4 onclick="window.print();"> Print </h4> 打印,javascript,jspdf,Javascript,Jspdf,使用window.print（）打印所有页面，而不仅仅是一个div 没有依赖关系，纯JS 要添加CSS或图像-不要使用相对URL，请使用完整URLhttp://...domain.../path.css左右。它创建单独的HTML文档，并且它没有主要内容的上下文 您还可以将图像嵌入为base64 多年来，我一直这样： export default function printDiv({divId, title}) { let mywindow = window.open('', 'PRINT

使用window.print（）打印所有页面，而不仅仅是一个div
  • 没有依赖关系，纯JS
  • 要添加CSS或图像-不要使用相对URL，请使用完整URL
    http://...domain.../path.css
    左右。它创建单独的HTML文档，并且它没有主要内容的上下文
  • 您还可以将图像嵌入为base64
    • 多年来，我一直这样：

    export default function printDiv({divId, title}) {
  let mywindow = window.open('', 'PRINT', 'height=650,width=900,top=100,left=150');

  mywindow.document.write(`<html><head><title>${title}</title>`);
  mywindow.document.write('</head><body >');
  mywindow.document.write(document.getElementById(divId).innerHTML);
  mywindow.document.write('</body></html>');

  mywindow.document.close(); // necessary for IE >= 10
  mywindow.focus(); // necessary for IE >= 10*/

  mywindow.print();
  mywindow.close();

  return true;
}

    导出默认函数printDiv（{divId，title}）{
让mywindow=window.open（“”，'PRINT'，'height=650，width=900，top=100，left=150'）；
mywindow.document.write（`${title}`）；
mywindow.document.write（“”）；
mywindow.document.write（document.getElementById（divId.innerHTML）；
mywindow.document.write（“”）；
mywindow.document.close（）；//对于IE>=10是必需的
mywindow.focus（）；//IE>=10所必需的*/
mywindow.print（）；
mywindow.close（）；
返回true；
}
    我使用and进行css渲染，并导出特定div的内容，因为这是我的代码

    $(document).ready(function () {
    let btn=$('#c-oreder-preview');
    btn.text('download');
    btn.on('click',()=> {

        $('#c-invoice').modal('show');
        setTimeout(function () {
            html2canvas(document.querySelector("#c-print")).then(canvas => {
                //$("#previewBeforeDownload").html(canvas);
                var imgData = canvas.toDataURL("image/jpeg",1);
                var pdf = new jsPDF("p", "mm", "a4");
                var pageWidth = pdf.internal.pageSize.getWidth();
                var pageHeight = pdf.internal.pageSize.getHeight();
                var imageWidth = canvas.width;
                var imageHeight = canvas.height;

                var ratio = imageWidth/imageHeight >= pageWidth/pageHeight ? pageWidth/imageWidth : pageHeight/imageHeight;
                //pdf = new jsPDF(this.state.orientation, undefined, format);
                pdf.addImage(imgData, 'JPEG', 0, 0, imageWidth * ratio, imageHeight * ratio);
                pdf.save("invoice.pdf");
                //$("#previewBeforeDownload").hide();
                $('#c-invoice').modal('hide');
            });
        },500);

        });
});
    一种方法是使用window.print（）函数。它不需要任何库

    专业人士

    1.无需外部库

    2.我们也只能打印选定的身体部位

    3.没有css冲突和js问题

    4.核心html/js功能

    ---只需添加以下代码

    CSS到

    @media print {
        body * {
            visibility: hidden; // part to hide at the time of print
            -webkit-print-color-adjust: exact !important; // not necessary use         
               if colors not visible
        }

        #printBtn {
            visibility: hidden !important; // To hide 
        }

        #page-wrapper * {
            visibility: visible; // Print only required part
            text-align: left;
            -webkit-print-color-adjust: exact !important;
        }
    }
    JS代码-点击btn调用bewlow函数

    $scope.printWindow = function () {
  window.print()
}
    注意：使用！在每个css对象中都很重要

    示例-

    .legend  {
  background: #9DD2E2 !important;
}
    使用和

    （我找到了要点以及指向该软件包的链接，但现在我没有使用该软件包。）

    在
    npm安装pdfmake
    并将要点保存在
    htmlToPdf.js
    中后，我使用它如下：

    function printPDF() {
    var printDoc = new jsPDF();
    printDoc.fromHTML($('#pdf').get(0), 10, 10, {'width': 180});
    printDoc.autoPrint();
    printDoc.output("dataurlnewwindow"); // this opens a new popup,  after this the PDF opens the print window view but there are browser inconsistencies with how this is handled
}

    ...
exportOptions: {
    proxy: "/filesaver/save",
    pdf: {
        fileName: "shieldui-export",
        author: "John Smith",
        dataSource: {
            data: gridData
        },
        readDataSource: true,
        header: {
            cells: [
                { field: "id", title: "ID", width: 50 },
                { field: "name", title: "Person Name", width: 100 },
                { field: "company", title: "Company Name", width: 100 },
                { field: "email", title: "Email Address" }
            ]
        }
    }
}
...

    constpdfmakex=require（'pdfmake/build/pdfmake.js'）；
const pdfFontsX=require（'pdfmake-unicode/dist/pdfmake unicode.js'）；
pdfMakeX.vfs=pdfFontsX.pdfMake.vfs；
从“pdfMake/build/pdfMake”导入*作为pdfMake；
从“./htmlToPdf.js”导入htmlToPdf；
var docDef=htmlToPdf（`Sample`）；
createPdf（{content:docDef}）。下载（'sample.pdf'）；
    备注:

    • 我的用例是从标记文档（带有）创建相关的html，然后生成pdf，并上传其二进制内容（我可以通过
      pdfMake
      的
      getBuffer（）
      函数获得），所有这些都是从浏览器中获得的。与我尝试过的其他解决方案相比，生成的pdf更适合这种html
    • 我对接受答案中建议的
      jsPDF.fromHTML（）
      得出的结果感到不满意，因为该解决方案很容易被HTML中的特殊字符所混淆，这些字符显然被解释为一种标记，并完全弄乱了生成的PDF
    • 使用基于画布的解决方案（如弃用的
      jsPDF.from_html（）
      函数，不要与接受答案中的函数混淆）对我来说不是一个选项，因为我希望生成的PDF中的文本是可粘贴的，而基于画布的解决方案生成基于位图的PDF
    • 直接降价到pdf转换器，如服务器端只，不会为我工作
    • 使用浏览器的打印功能对我不起作用，因为我不想显示生成的PDF，而是上传其二进制内容
    这个例子非常有效

    <button onclick="genPDF()">Generate PDF</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script>
    function genPDF() {
        var doc = new jsPDF();
        doc.text(20, 20, 'Hello world!');
        doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
        doc.addPage();
        doc.text(20, 20, 'Do you like that?');
    
        doc.save('Test.pdf');
    }
</script>

    生成PDF
函数genPDF（）{
var doc=new jsPDF（）；
doc.text（20，20，“你好，世界！”）；
text（20，30，'这是客户端Javascript，输出PDF'）；
doc.addPage（）；
文本（20，20，‘你喜欢吗？’）；
doc.save（'Test.pdf'）；
}
    任何人都可以试试这个

    （函数（）{
变量
form=$（'.form'），
cache_width=form.width（），
a4=[595.28841.89]；//用于a4大小的纸张宽度和高度
$（'#create_pdf'）。在（'click'，函数（）{
$（'body'）。滚动顶部（0）；
createPDF（）；
});  
//创建pdf
函数createPDF（）{
getCanvas（）.then（函数（画布）{
变量
img=canvas.toDataURL（“image/png”），
doc=新的jsPDF（{
单位：px，
格式：“a4”
});  
addImage文件（img，'JPEG'，20，20）；
doc.save（'Bhavdip-html-to-pdf.pdf'）；
形式.宽度（缓存宽度）；
});  
}  
//创建画布对象
函数getCanvas（）{
表格宽度（（a4[0]*1.33333）-80）.css（'max-width'，'none'）；
返回html2canvas（表格{
图像超时：2000，
removeContainer：对
});  
}  
}());
    如上所述，我不想使用“文本”功能。我想给它HTML。你的链接只处理纯文本，而不是htmljsPDF有一个
    fromHTML
    函数；请参阅“HTML渲染器”示例：这里的TryJSPDF教程我很好奇，除了OP，这对任何人都有效吗？通过阅读代码，我似乎明白它只适用于具有ID的元素。可能比这更复杂，无论如何，我不知道如何实现这一点。从我观察到的情况来看，非常讽刺的是，只有当作为参数发送的元素不包含任何HTML时，fromHTML才有效：只支持纯文本。这有点破坏了整个事情的目的，对我来说非常有效。您想要传入的元素不一定需要有ID。这就是复制者找到他想要传入的节点的方式。此外，此解决方案也可以在没有“printDoc.autoPrint（）”的情况下使用。如果你想在代码中留下这一行，那么你需要包括自动打印插件 
    //add the sdk
<script type="text/javascript" src="grabzit.min.js"></script>
<script type="text/javascript">
//login with your key and secret. 
GrabzIt("KEY", "SECRET").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "format": "pdf"}).Create();
</script>

    <h4 onclick="window.print();"> Print </h4>

    export default function printDiv({divId, title}) {
  let mywindow = window.open('', 'PRINT', 'height=650,width=900,top=100,left=150');

  mywindow.document.write(`<html><head><title>${title}</title>`);
  mywindow.document.write('</head><body >');
  mywindow.document.write(document.getElementById(divId).innerHTML);
  mywindow.document.write('</body></html>');

  mywindow.document.close(); // necessary for IE >= 10
  mywindow.focus(); // necessary for IE >= 10*/

  mywindow.print();
  mywindow.close();

  return true;
}

    $(document).ready(function () {
    let btn=$('#c-oreder-preview');
    btn.text('download');
    btn.on('click',()=> {

        $('#c-invoice').modal('show');
        setTimeout(function () {
            html2canvas(document.querySelector("#c-print")).then(canvas => {
                //$("#previewBeforeDownload").html(canvas);
                var imgData = canvas.toDataURL("image/jpeg",1);
                var pdf = new jsPDF("p", "mm", "a4");
                var pageWidth = pdf.internal.pageSize.getWidth();
                var pageHeight = pdf.internal.pageSize.getHeight();
                var imageWidth = canvas.width;
                var imageHeight = canvas.height;

                var ratio = imageWidth/imageHeight >= pageWidth/pageHeight ? pageWidth/imageWidth : pageHeight/imageHeight;
                //pdf = new jsPDF(this.state.orientation, undefined, format);
                pdf.addImage(imgData, 'JPEG', 0, 0, imageWidth * ratio, imageHeight * ratio);
                pdf.save("invoice.pdf");
                //$("#previewBeforeDownload").hide();
                $('#c-invoice').modal('hide');
            });
        },500);

        });
});

    @media print {
        body * {
            visibility: hidden; // part to hide at the time of print
            -webkit-print-color-adjust: exact !important; // not necessary use         
               if colors not visible
        }

        #printBtn {
            visibility: hidden !important; // To hide 
        }

        #page-wrapper * {
            visibility: visible; // Print only required part
            text-align: left;
            -webkit-print-color-adjust: exact !important;
        }
    }

    $scope.printWindow = function () {
  window.print()
}

    .legend  {
  background: #9DD2E2 !important;
}

    <button onclick="genPDF()">Generate PDF</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script>
    function genPDF() {
        var doc = new jsPDF();
        doc.text(20, 20, 'Hello world!');
        doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
        doc.addPage();
        doc.text(20, 20, 'Do you like that?');
    
        doc.save('Test.pdf');
    }
</script>