vue 项目前端导出pdf(纯前端操作)

这篇具有很好参考价值的文章主要介绍了vue 项目前端导出pdf(纯前端操作)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.安装两个插件:html2canvas和jspdf

npm install html2canvas
npm install jspdf文章来源地址https://www.toymoban.com/news/detail-787426.html

2.创建一个公共文件tool.js如下

import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';

/**
 * @param  ele          要生成 pdf 的DOM元素(容器)
 * @param  padfName     PDF文件生成后的文件名字
 * */

function downloadPDF(ele, pdfName){
    let eleW = ele.offsetWidth;// 获得该容器的宽
    let eleH = ele.offsetHeight;// 获得该容器的高
    let eleOffsetTop = ele.offsetTop;  // 获得该容器到文档顶部的距离
    let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离
    var canvas = document.createElement("canvas");
    var abs = 0;
    let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度(不包含滚动条)
    let win_out = window.innerWidth; // 获得当前窗口的宽度(包含滚动条)
    if(win_out>win_in){
        // abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
        abs = (win_out - win_in)/2;    // 获得滚动条宽度的一半
        // console.log(a, '新abs');
    }
    canvas.width = eleW * 2;    // 将画布宽&&高放大两倍
    canvas.height = eleH * 2;
    var context = canvas.getContext("2d");
    context.scale(2, 2);
    context.translate(-eleOffsetLeft -abs, -eleOffsetTop);
    // 这里默认横向没有滚动条的情况,因为offset.left(),有无滚动条的时候存在差值,因此
    // translate的时候,要把这个差值去掉
    // html2canvas(element).then( (canvas)=>{ //报错
    // html2canvas(element[0]).then( (canvas)=>{
    html2canvas( ele, {
        dpi: 300,
        scale: 3,
        // allowTaint: true,  //允许 canvas 污染, allowTaint参数要去掉,否则是无法通过toDataURL导出canvas数据的
        useCORS:true  //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
    } ).then( (canvas)=>{

        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 = 595.28/contentWidth * contentHeight;
        var pageData = canvas.toDataURL('image/jpeg', 1.0);
        var pdf = new JsPDF('', 'pt', 'a4');
        //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围,无需分页
        if (leftHeight < pageHeight) {
            //在pdf.addImage(pageData, 'JPEG', 左,上,宽度,高度)设置在pdf中显示;
            pdf.addImage(pageData, 'JPEG', 0, 40, imgWidth, imgHeight);
            // pdf.addImage(pageData, 'JPEG', 20, 40, 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(pdfName);
    })


}


export default {
    downloadPDF
}

3.页面使用如下(注意id不能放dialog标签上)

<el-dialog title=""  class="report-dialog" :visible.sync="dialogReport" :before-close="pdfClose" center>
      <!-- height:500px;overflow:scroll; -->
      <div class="downBtn">
      <el-button @click="download" class="down">下载</el-button>
    </div>
      <div id="investmentReport" style="padding:10px;">
      导出的内容在这里啊
      </div>
</el-dialog>
      
  methods: {
      // 下载
      download(row){
        htmlToPdf.downloadPDFtest(
        document.querySelector("#investmentReport"),
        "默认的pdf"
      );     
      }

到了这里,关于vue 项目前端导出pdf(纯前端操作)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue2轻松实现HTML导出高质量PDF,告别繁琐操作

    在前端开发中,我们常常需要将网页内容以PDF格式进行导出。例如,企业需要将报告以PDF文件的形式保存并分享给客户;学校需要将学生的作业打包成PDF文件进行提交等。在Vue2中,我们可以通过一些简单的步骤来实现HTML导出PDF功能。 目录 一、使用jsPDF库 二、实现导出PDF的方

    2024年02月10日
    浏览(44)
  • 前端(vue)js在线预览PDF、Word、Excel、ppt等office文件

    可选参数 pdf=true,word文档尝试以pdf方式显示,默认false watermark=水印文本,显示文本水印;“img:”+图片url表示图片水印,如:img:https://view.xdocin.com/demo/wm.png saveable=true,是否允许保存源文件,默认false printable=false,是否允许打印,默认true ©able=false,是否允许选择复制内容,

    2024年02月13日
    浏览(70)
  • vue3项目使用pdf.js插件实现:搜索高亮、修改pdf.js显示的页码、向pdf.js传值、控制搜索、处理接口文件流

    官网地址:http://mozilla.github.io/pdf.js/ 中文文档地址:https://gitcode.gitcode.host/docs-cn/pdf.js-docs-cn/print.html PDF.js是基于HTML5技术构建的,用于展示可移植文档格式的文件(PDF),它可以在现代浏览器中使用且无需安装任何第三方插件。 pdf.js主要包含两个库文件 pdf.js:负责API解析 pdf.wor

    2024年02月13日
    浏览(67)
  • 前端导出PDF(纯前端功能)

    例如:需要导出PDF格式 提示:问题出现在滚动条加错地方 首先: npm install html2canvas npm install jspdf 第二:新建一个htmlToPdf.js文件存放 // 导出页面为PDF格式 import html2Canvas from \\\'./html2canvas\\\' import JsPDF from \\\'./jsPdf.debug\\\' export default{   name:\\\'wwutils\\\',   toolExportPdf(fileName) {     let isCompele

    2024年02月16日
    浏览(45)
  • JS打印、导出PDF

    这种方式打印的pdf比较高清,且分页不会截断文字和图片,背景图片是会被截断的 1.直接打印 直接调用浏览器的打印功能,打印整个页面 2.打印指定区域 通过开始标记、结束标记来打印,打印局部页面 注意 :1.如果你要打印的区域中包含vue赋值对象,那你的开始结束标志符

    2024年02月15日
    浏览(44)
  • 【前端】vue.js从入门到项目实战笔记

    【前端目录贴】 文本插值中的代码被解释为节点的文本内容,而HTML插值中的代码则被渲染为视图节点。 3.1.1 文本插值 文本插值的方式:用 双大括号 将要绑定的变量、值、表达式括住就可以实现,Vue将会 获取计算后的值 ,并以 文本的形式 将其展示出来。 结果: 3.1.2 HTM

    2024年01月21日
    浏览(50)
  • vue2 若依项目,使用plotly.js-dist图表库,将数据图表一键导出为图片

    此代码适用的场景是一个页面有多个数据图表。 首先需要拿到你生成数据图表的数据, 然后赋值给一个数组,数组需要在data定义,还需要去重。  然后点击导出按钮的代码如下: 单个下载可以点击数据图表的照相机,可以实现单个下载。 如果数据图表做了分页和懒加载,无

    2024年02月12日
    浏览(46)
  • tomcat部署前端vue项目(项目上线具体操作)

    在linux上安装tomcat可以直接在linux服务器上通过wget方式直接下载tomcat,也可以把本地的tomcat上传到服务器。 具体操作步骤如下: 创建一个tomcat目录,位置可以根据自己情况选择 将上传的tomcat复制到上面目录 进入tomcat目录 解压tomcat 进入tomcat的bin目录 启动tomcat 关闭tomcat 删除

    2024年02月01日
    浏览(47)
  • 纯前端实现导出pdf文件(服务端不参与)

    大致查阅了现阶段使用较多的几种方案,,大概有以下几种方式: 一、原生window.print()方法导出pdf 二、jspdf 三、jspdf + html2canvas 四、pdfmake 方案 优点 缺点 window.print() 1、兼容性最好 2、可以将任意内容导出成 pdf 文档, 甚至是非改页面上的内容 1、调用方法时部分条件下导出pd

    2024年04月08日
    浏览(38)
  • vue项目中,动态src引入图片,并且js根据文件名后缀,判断文件图片、视频、文档、pdf等类型的方法

    vue根据文件地址,获取后缀,根据后缀判断类型,然后根据类型动态展示不同类型的照片 1、处理后缀,根据后缀判断类型   2、根据返回的结果,直接将文件名命名为返回的结果,比如我有个图片类型的文件,经过上述的方法,返回的是image,那我直接要显示的图片名称就为

    2024年02月06日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包