个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我有一个简单的 HTML 页面，其中的标题部分带有背景图像。
使用 jspdf 将页面转换为 Html 到 pdf 后，所有内容都会显示背景图像。
看看这个 fiddle https://jsfiddle.net/rmtest/30augcvj/2/
html
<body id="pdf">
<!-- header section -->
<div class="section-header" id="main_d">
<h1>
data
</h1>
</div>
</body>
CSS
.section-header{
//background-color:red;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSkxORFDMPY7v_DGrlgBxnFBHtwifP9Uz28Y5-8TcNpdTwILs3E");
background-repeat: no-repeat;
max-height: 200px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
js
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script>
var pdf = new jsPDF('1', 'pt', 'a4');
pdf.addHTML($('#pdf')[0], function () {
// pdf.output("dataurlnewwindow");
pdf.save('Test.pdf');
});
</script>
最佳答案
为了回答这个问题，我首先尝试使用较新版本的html2canvas(1.0.0-rc.5)来看看是否有添加背景图片的功能。尽管进行了多次尝试，我还是很不幸。这是我的一个解决方案(更正确地定义为解决方法):
由于库考虑的唯一属性是背景颜色，因此我们不能直接将图像放入 CSS 中。此时的解决方案是直接将图像插入 jsPDF 并在其顶部写入标题或其他文本。
只有当 header 几乎总是相同时，此解决方案才可能且方便。
var imgData = 'data:image/jpeg;base64,'+ Base64.encode('your-image.jpeg');
doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);
然后可以通过 addHTML 添加其余内容，同时考虑文本相对于图像的坐标。
关于javascript - JSPDF addHTML 不显示背景图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59086813/
24
4
0
如何让 jsPDF 从具有溢出设置的元素创建图像/pdf，以便它具有滚动条。以下示例粘贴到 addHTML Have a Play 页面 ( http://mrrio.github.io/jsPDF/
我正在尝试使用 jsPDF 库将我的 HMTL 页面(表单)转换为 pdf，这是我所做的: var pdf = new jsPDF(); var btn = document.getElementBy
我有一个简单的 HTML 页面，其中的标题部分带有背景图像。 使用 jspdf 将页面转换为 Html 到 pdf 后，所有内容都会显示背景图像。 看看这个 fiddle https://jsfidd
在 Angular 2 中使用 jsPDF，我在单击按钮时运行此代码: generatePDF(){ const options = {'pagesplit': true} this.
我创建了 html 表格并尝试使用 jsPDF 生成 pdf。 我使用了以下代码: var pdf = new jsPDF('p','pt','a4'); pdf.addHTML(document.
我正在使用 jsPDF 将正文转换为 pdf。它在桌面浏览器上工作得很好，但如果我在移动设备上使用浏览器尝试它，它就不能很好地工作，因为它变得模糊。有没有人遇到过这种问题，如果有的话，我将不胜感激你对
我使用的示例来自 jsPdf official demo site测试新的 addHTML 函数，稍作改动即可直接保存生成的 PDF。 console.log("testing"); var pdf
过去 2 天搜索的简单问题，但未找到解决方案我正在使用 jsPDF 的这个 addHTML api 将 html 转换为 pdf $('#loadPdf').on('click', function(
我注意到已经有一个版本“addHTML() 现在可以将 Canvas 分成多个页面”，可以通过此链接找到:https://github.com/MrRio/jsPDF/releases/tag/v1.
我正在尝试使用 angular 中 jspdf 库的 addHTML 函数，并且已经安装了 html2Canvas 但出现错误。 这是我的 demo.component.ts 文件。 import {
我已经尝试了互联网上的所有方法，这是我最后一次尝试确定这是否可行。我正在处理的是一个长而动态的 html，我必须将它转换为多页 pdf。我尝试了 addhtml 和 addImage 方法，但没有得到
了解到目前为止，html 功能已支持列表(OL 和 UL)( https://github.com/MrRio/jsPDF/pull/249 )。我可以知道是否也可以实现 addHTML() ？ 谢谢
标题: HTML: JavaScript: $(".button").click(function() { var pdf = new jsPDF('p',
我正在尝试使用 jsPDF 插件在我的应用程序中创建自定义打印输出。应用程序使用 AngularJs 框架工作。我尝试了许多不同的示例代码，但没有任何效果......( http://jsfiddle
我正在使用 jspdf 将 html 转换为 pdf。我正在使用 addHTML 方法将 html 页面转换为 pdf var htmlSource = $('#body')[0]; funct
我是一名优秀的程序员,十分优秀！