草庐IT

vue导出pdf(大数量可能有问题)

陶菇凉 2023-03-28 原文

1.首先创建js文件exportPdf.js,且需要安装html2canvas和jspdf两个插件;
然后将在你需要导出的页面中执行方法,

this.getPdf("html", "报表");
//参数一:导出范围的id
//参数二:导出pdf文件的名称

下面是导出的主要代码;我在网上查找了大量的代码才写出了这个,其他的代码都是很浅显,虽然也可以导出,但是一旦数据量过大,页面较长导出的pdf文件便会白屏;此文件解决了此问题,但是因为导出的pdf做了分页,而pdf又是由图片转换而来,所以分页中会有截断的问题,暂未解决,希望大家可以指点。

/* 导出pdf文档 */
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
export default {
 install(Vue, options) {
   Vue.prototype.getPdf = function (id, title) {
     const loading = Vue.prototype.$loading({
       fullscreen: true,
       lock: true,
       text: 'Loading',
       spinner: 'el-icon-loading',
       background: 'rgba(0, 0, 0, 0.7)'
     });
     let shareContent = document.getElementById(id), //需要截图的包裹的(原生的)DOM 对象
       width = shareContent.clientWidth, //获取dom 宽度
       height = shareContent.clientHeight, //获取dom 高度
       canvas = document.createElement("canvas"), //创建一个canvas节点
       scale = 1; //定义任意放大倍数 支持小数
     canvas.width = width * scale; //定义canvas 宽度 * 缩放
     canvas.height = height * scale; //定义canvas高度 *缩放
     canvas.style.width = shareContent.clientWidth * scale + "px";
     canvas.style.height = shareContent.clientHeight * scale + "px";
     canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
     let opts = {
       scale: scale, // 添加的scale 参数
       canvas: canvas, //自定义 canvas
       logging: false, //日志开关,便于查看html2canvas的内部执行流程
       width: width, //dom 原始宽度
       height: height,
       useCORS: true, // 【重要】开启跨域配置
     }
     html2Canvas(shareContent, opts).then(() => {
       var contentWidth = canvas.width;
       var contentHeight = canvas.height;
       //一页pdf显示html页面生成的canvas高度;
       var pageHeight = (contentWidth / 592.28) * 841.89;
       //未生成pdf的html页面高度
       var leftHeight = contentHeight;
       //页面偏移
       var position = 0;
       //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
       var imgWidth = 595.28;
       var imgHeight = (592.28 / contentWidth) * contentHeight;
       var pageData = canvas.toDataURL("image/jpeg", 1.0);
       var PDF = new JsPDF("", "pt", "a4");
       if (leftHeight < pageHeight) {
         PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
       } else {
         while (leftHeight > 0) {
           PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
           leftHeight -= pageHeight;
           position -= 841.89;
           if (leftHeight > 0) {
             PDF.addPage();
           }
         }
       }
       PDF.save(title + ".pdf"); // 这里是导出的文件名
       loading.close();
       this.$router.go(-1)
     });
   };
 }
};

注意:打印的时候,父级或者父级之上的元素的css设置不能有transform,否则在火狐浏览器中,打印出来的pdf会有偏移。

有关vue导出pdf(大数量可能有问题)的更多相关文章

  1. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库,所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  2. ruby - 如何以所有可能的方式将字符串拆分为长度最多为 3 的连续子字符串? - 2

    我试图获取一个长度在1到10之间的字符串,并输出将字符串分解为大小为1、2或3的连续子字符串的所有可能方式。例如:输入:123456将整数分割成单个字符,然后继续查找组合。该代码将返回以下所有数组。[1,2,3,4,5,6][12,3,4,5,6][1,23,4,5,6][1,2,34,5,6][1,2,3,45,6][1,2,3,4,56][12,34,5,6][12,3,45,6][12,3,4,56][1,23,45,6][1,2,34,56][1,23,4,56][12,34,56][123,4,5,6][1,234,5,6][1,2,345,6][1,2,3,456][123

  3. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  4. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止,这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  5. ruby - Fast-stemmer 安装问题 - 2

    由于fast-stemmer的问题,我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

  6. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  7. ruby-on-rails - Prawn PDF : I need to generate nested tables - 2

    我需要一个表,其中行实际上是2行表,一个嵌套表是..我怎样才能在Prawn中做到这一点?也许我需要延期..但哪一个? 最佳答案 现在支持子表:Prawn::Document.generate("subtable.pdf")do|pdf|subtable=pdf.make_table([["sub"],["table"]])pdf.table([[subtable,"original"]])end 关于ruby-on-rails-PrawnPDF:Ineedtogeneratenested

  8. java - 从 JRuby 调用 Java 类的问题 - 2

    我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java,并成功地将它与另一个Java包一起使用,但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www

  9. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章? - 2

    我意识到这可能是一个非常基本的问题,但我现在已经花了几天时间回过头来解决这个问题,但出于某种原因,Google就是没有帮助我。(我认为部分问题在于我是一个初学者,我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI,但我仍然停留在这个问题上.我找到了一些关于多态关系的信息,但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

  10. 【高数】用拉格朗日中值定理解决极限问题 - 2

    首先回顾一下拉格朗日定理的内容:函数f(x)是在闭区间[a,b]上连续、开区间(a,b)上可导的函数,那么至少存在一个,使得:通过这个表达式我们可以知道,f(x)是函数的主体,a和b可以看作是主体函数f(x)中所取的两个值。那么可以有,  也就意味着我们可以用来替换 这种替换可以用在求某些多项式差的极限中。方法: 外层函数f(x)是一致的,并且h(x)和g(x)是等价无穷小。此时,利用拉格朗日定理,将原式替换为 ,再进行求解,往往会省去复合函数求极限的很多麻烦。使用要注意:1.要先找到主体函数f(x),即外层函数必须相同。2.f(x)找到后,复合部分是等价无穷小。3.要满足作差的形式。如果是加

随机推荐