首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何防止html2canvas在显示我的pdf后截图?

如何防止html2canvas在显示我的pdf后截图?
EN

Stack Overflow用户
提问于 2022-02-10 05:22:42
回答 1查看 101关注 0票数 0

我使用jspdf自动表和html2canvas中的React.js在我的页面上创建和显示一个pdf。一切运行良好,但在我的pdf显示在弹出,然后一个额外的屏幕截图是添加在我的页面下面。我想阻止这张截图。

当你看第一张照片,一切都很好,我可以看到我的pdf弹出。但是当我关闭弹出时,下面会创建一个屏幕截图。你可以在第二张照片上看到它。有什么办法可以防止吗?

这是我的代码:

代码语言:javascript
复制
doc.autoTable({
        showHead:'firstPage',
        margin:5,
        startY: 60,
        body: bodyData,
        columns: [
          { header: 'Sıra', dataKey: 'Count' },
          { header: 'Gelir Tipi', dataKey: 'AccrumentTypeName' },
          { header: 'Gelir Türü', dataKey: 'RevenueName' },
          { header: 'Tahakkuk Tutarı', dataKey: 'TotalAmount' },
        ],
        styles: {
            font: 'NotoSans-Regular',
            lineWidth: 0.2,
            lineColor: 0,
            fontSize:7,
          },
        didParseCell: function (data) {
            var rows = data.table.body;
            if (data.row.index === rows.length - 1) {
                data.cell.styles.fillColor = [176, 224, 230];
            }
        }
    })

const pageCount = doc.internal.getNumberOfPages();
    doc.setFontSize(8)
    for (var i = 1; i <= pageCount; i++) {
        doc.setPage(i)
        doc.text('Sayfa ' + String(i) + ' / ' + String(pageCount), doc.internal.pageSize.width / 2, 294, {
            align: 'center'
        })
    }

    //Create screenshot of body
    html2canvas(document.body, {scale: 2,scrollY: 0,height: window.outerHeight + window.innerHeight, windowHeight: window.outerHeight + window.innerHeight, }).then(canvas => {
       document.body.appendChild(canvas);
       let output = doc.output('bloburl');
       document.getElementById("pdfObj").height = canvas.height / 4;
       document.getElementById("pdfObj").data = output;
    });
EN

Stack Overflow用户

发布于 2022-02-10 07:00:08

我解决了我的问题。问题是,每次我称之为html2canvas时,它都是在index.html中作为屏幕快照创建的。所以我

代码语言:javascript
复制
<style>
  canvas{
    display: none !important;
  }
</style>

在index.html中。那就成功了!

票数 0
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/71060178

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档