html 导出为 PDF：因页面内有横向滚动条而显示不全的解决方案

最新推荐文章于 2024-09-26 11:32:21 发布

莫亓

最新推荐文章于 2024-09-26 11:32:21 发布

阅读量5.1k

点赞数

分类专栏： Vue网站局部实现各种方法你来使用

本文链接：https://blog.csdn.net/Bule_daze/article/details/111244892

版权

本文介绍了在Vue项目中，如何处理html内容导出为PDF时遇到的横向滚动条导致内容显示不全的解决方案。通过指定特定样式以及考虑组件宽度，确保PDF中完整显示表格等含有大量列的内容。引用了jspdf库作为参考。

摘要由CSDN通过智能技术生成

在 Vue 中，将 html 内容导出为 PDF

为了使横向滚动条的内容全部展示，需要指定 width: document.getElementById(id).scrollWidth。

<div ref="myContainer">
  <!-- 我是需要导出的内容 -->
</div>

// 生成pdf
getPDF() {
   
  this.generatePDF(
    this.$refs.myContainer,
    "我是下载的pdf的名字，随便起啦，也可以用变量"
  );
},
generatePDF(el, name) {
   
  let parent = el.offsetParent;
  let grandParent = parent.offsetParent;
  let left = grandParent.offsetLeft + parent.offsetLeft + el.offsetLeft