精华内容
下载资源
问答
  • vue 项目导出pdf两种方式

    万次阅读 多人点赞 2019-07-04 16:28:46
    vue 项目导出pdf两种方式 : https://gitee.com/lbx_1397372495/vue-pdf-demo 项目源码地址 1.使用 html2Canvas + jsPDF 导出PDF, 这种方式什么都好,就是下载的pdf太模糊了。对要求好的pdf这种方式真是不行啊! 2....

    vue 项目导出pdf两种方式 :

    https://gitee.com/lbx_1397372495/vue-pdf-demo
    项目源码地址

    1.使用 html2Canvas + jsPDF 导出PDF, 这种方式什么都好,就是下载的pdf太模糊了。对要求好的pdf这种方式真是不行啊!
    2.调用浏览器自身的方法。window.print() 来打印(打印时可选下载),这种方式打印出来会清楚点,但纯在浏览器兼容问题。 谷歌浏览器比较好用点

    首先看下导出的样式,是否是你需要的,如果是你想要的恭喜你找到答案了!!!!!!!

    在这里插入图片描述

    浏览器导出pdf方式

    在这里插入图片描述

    js组件导出pdf方式

    在这里插入图片描述

    1 、我们要添加两个模块

    第一个.将页面html转换成图片
    npm install --save html2canvas 
    第二个.将图片生成pdf
    npm install jspdf --save
    

    2、定义函数,创建两个工具js文件(htmlToPdf.js、htmlToPdfJQ.js)

    (1) 创建一个htmlToPdf.js文件在指定位置.我个人习惯放在(’\src\unit\htmlToPdf.js’)

    /* eslint-disable */
    //不使用JQuery版的
    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,
            // 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, 0, 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
    }
    
    

    (2) 创建一个htmlToPdfJQ.js文件在指定位置.我个人习惯放在(’\src\unit\htmlToPdfJQ.js’)

    /* eslint-disable */
    //使用JQuery方式写的。
    
    import html2canvas from 'html2canvas';
    import JsPDF from 'jspdf';
    import $ from 'jquery';
    
    // console.log($, '这是什么什么');
    function download(ele){
        var element = $("#demo");    // 这个dom元素是要导出pdf的div容器
        console.log(element,'1212122');
        // var element = ele;    // 这个dom元素是要导出pdf的div容器
        var w = element.width();    // 获得该容器的宽
        var h = element.height();    // 获得该容器的高
        var offsetTop = element.offset().top;    // 获得该容器到文档顶部的距离
        var offsetLeft = element.offset().left;    // 获得该容器到文档最左的距离
    
        console.log(offsetTop,'------',offsetLeft);
        var canvas = document.createElement("canvas");
        var abs = 0;
        var win_i = $(window).width();    // 获得当前可视窗口的宽度(不包含滚动条)
        var win_o = window.innerWidth;    // 获得当前窗口的宽度(包含滚动条)
    
        console.log(canvas, abs, win_i, win_o);
    
        if(win_o>win_i){
            abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
        }
    
        canvas.width = w * 2;    // 将画布宽&&高放大两倍
        canvas.height = h * 2;
        var context = canvas.getContext("2d");
        context.scale(2, 2);
        context.translate(-offsetLeft-abs,-offsetTop);
        // 这里默认横向没有滚动条的情况,因为offset.left(),有无滚动条的时候存在差值,因此
        // translate的时候,要把这个差值去掉
        // html2canvas(element).then( (canvas)=>{ //报错
        html2canvas(element[0]).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 = 592.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', 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('我的简历.pdf');
        })
    }
    export default {
        download
    }
    
    

    3 、在我们自己业务中使用导出组件功能

    <template>
      <div class="mod-config">
        <div style="padding: 10px;">
          <el-button type="primary" @click="handleDown">PDF下载-离职申请表</el-button>
          <el-button type="primary" @click="handleWindowPrint( '#demo', '离职申请表' )">浏览器方式下载</el-button>
          <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-back" @click="goBack">返回
          </el-button>
        </div>
        <div style="width: 100%">
        <div id="demo">
          <table border="1" class="table_style">
            <thead>
            <th colspan="5" style="font-size: 30px">离职申请表</th>
            </thead>
            <tbody>
            <tr>
              <td rowspan="3">申请人</td>
              <td>工号</td>
              <td>{{leaveData.userno}}</td>
              <td>职位</td>
              <td>{{leaveData.position}}</td>
            </tr>
            <tr>
              <td>姓名</td>
              <td>{{leaveData.realName}}</td>
              <td>离职原因</td>
              <td>{{leaveData.reason | typeFilter}}</td>
            </tr>
            <tr>
              <td>部门</td>
              <td>{{leaveData.dept}}</td>
              <td>离岗日期</td>
              <td>{{leaveData.leaveDate.substr(0,10)}}</td>
            </tr>
            <tr>
              <td colspan="5" style="font-size: 20px">各级审批信息</td>
            </tr>
            <tr>
              <td>审批人姓名</td>
              <td colspan="3">审批意见</td>
              <td>审批时间</td>
            </tr>
            <tr v-for="item in approvalLogs">
              <td>{{item.approveName}}</td>
              <td colspan="3">{{item.approveMsg}}</td>
              <td>{{item.approveDate.substr(0,10)}}</td>
            </tr>
            </tbody>
          </table>
    
        </div>
        </div>
      </div>
    </template>
    
    <script>
      import htmlToPdf from '@/unit/htmlToPdf'
      const libraryOption = [{id: 0, name: '家庭原因'}, {id: 1, name: '个人发展'}, {id: 2, name: '薪资福利'},
        {id: 3, name: '工作环境'}, {id: 4, name: '工作时间'}, {id: 5, name: '身体健康'}]
      const calendarTypeKeyValue = libraryOption.reduce((acc, cur) => {
        acc[cur.id] = cur.name
        return acc
      }, {})
      export default {
        name: 'PdfDemo',
        data () {
          // 和导出pdf没关系
          return {
            leaveData: {
              dimId: ''
            },
            approvalLogs: []
          }
        },
        filters: {
          typeFilter (type) {
            return calendarTypeKeyValue[type]
          }
        },
        created () {
          this.getList()
        },
        methods: {
          getList () {
            this.leaveData = this.$route.query.obj
            if (!this.leaveData.dimId) {
              this.$message.error('id不能为空,请从下下载!')
              this.goBack()
            } else {
              this.$http({
                url: this.$http.adornUrl(`/sys/sysapprovelog/list`),
                method: 'post',
                data: {
                  approve_type: 6,
                  approve_id: this.leaveData.dimId
                }
              }).then(({data}) => {
                console.log(data)
                if (data && data.code === 0) {
                  this.approvalLogs = data.sysApproveLogs
                  console.log('------------2------------', this.approvalLogs)
                }
              })
            }
            console.log('------------1------------', this.leaveData)
          },
          handleWindowPrint (ele, fileName) {
            // 留存原来的 html
            // let bdHtml = window.document.body.innerHTML;
            // let bdHtml = document.querySelector('#app').innerHTML;
    
            // 要打印的 内容 html
            // document.body.innerHTML =  document.querySelector('#demo').innerHTML;
            // document.body.innerHTML =  document.querySelector('#demo').outerHTML;
            // document.querySelector('#app').innerHTML =  document.querySelector('#demo').outerHTML;
            // document.querySelector('#main').innerHTML =  document.querySelector('#demo').outerHTML;
            console.log(666)
          // 去除页面不必要的 head 标签内  内容, 避免影响打印页 , title 为保存为 pdf 的文件时的 文件名
            document.head.innerHTML = '<meta charset="utf-8">\n' +
              ' <title> ' + fileName + '</title>\n' +
              ' <meta name="format-detection" content="telephone=no">\n' +
              ' <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\n' +
              ' <meta name="viewport" content="width=device-width,initial-scale=1.0">\n' +
              ' <link rel="stylesheet" href="./static/css/contract.css"/>'  // 生成pdf的外部css样式
          // document.body.innerHTML =  document.querySelector('#demo').outerHTML;
          // document.querySelector('#main').innerHTML =  document.querySelector('#demo').outerHTML;
          // document.body.innerHTML =  document.querySelector('#demo').outerHTML;
            document.body.innerHTML = document.querySelector(ele).outerHTML
    
          // window.print();
    
          // 转异步 等待dom元素渲染(样式)完毕在打印
            setTimeout(() => {
              // 打印
              window.print()
            // 刷新页面
              window.location.reload()
            }, 20)
    
            // 重新设会当前页面
            // window.document.body.innerHTML = bdHtml;
            // document.querySelector('#app').innerHTML =  bdHtml;
            // 刷新页面
            // window.location.reload();
          },
          goBack () {
            this.$router.go(-1)
          },
          handleDown () {
            htmlToPdf.downloadPDF(document.querySelector('#demo'), '离职申请表')
          }
        }
      }
    </script>
    
    <style scoped>
      #demo {
        background-color: #fff;
        width: 1000px;
        /* height: 400px; */
        margin: auto;
        padding: 40px;
        box-sizing: border-box;
      }
    
      .table_style td,th {
        padding: 10px;
        font-size: 15px;
      }
    
      .table_style {
        border-collapse: collapse;
        width: 100%;
        text-align: center
      }
    </style>
    
    

    https://gitee.com/lbx_1397372495/vue-pdf-demo
    项目源码地址
    希望给个star

    展开全文
  • 前端实现Vue项目导出PDF

    千次阅读 2019-10-22 16:01:27
    vue项目导出pdf的两种方式: 方式一:使用html2canvas和jspdf插件实现 该方式是通过html2canvas将HTML页面转换成图片,然后再通过jspdf将图片的base64生成为pdf文件。 缺点: 生成的pdf质量不高,失真比较严重...

    方式一:使用html2canvas和jspdf插件实现

    该方式是通过html2canvas将HTML页面转换成图片,然后再通过jspdf将图片的base64生成为pdf文件。

    缺点:

    • 生成的pdf质量不高,失真比较严重;
    • 在分页处如果有图片的话,不会自动识别隔页处理(甚至一行文字也能给你上下一分为二),而是无情地把图片一分为二。

    实现步骤如下:
    1.安装插件 jspdf html2canvas

        第一个.将页面html转换成图片
        npm install --save html2canvas 
        第二个.将图片生成pdf
        npm install jspdf --save
    

    2、创建htmlToPdf.js文件。(‘src/scripts/common/utils/htmlToPdf’)'

    分页处理:

    import html2Canvas from 'html2canvas'
    import JsPDF from 'jspdf'
    export default {
      install (Vue, options) {
        Vue.prototype.getPdf = function (idStr, title) {
          html2Canvas(document.querySelector('#' + idStr), {
            // allowTaint: true,
            useCORS: true,
            // scale: 2, // 提升画面质量,但是会增加文件大小
          }).then((canvas) => {
            const contentWidth = canvas.width
            const contentHeight = canvas.height
            // 一页pdf显示html页面生成的canvas高度;
            const pageHeight = contentWidth / 592.28 * 841.89
            // 生成pdf的html页面高度
            let leftHeight = contentHeight
            // 页面偏移
            let position = 0
            // a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
            const imgWidth = 595.28
            const imgHeight = 592.28 / contentWidth * contentHeight
            // canvas.crossOrigin="anonymous";
            const pageData = canvas.toDataURL('image/jpeg', 1.0)
    
            const PDF = new JsPDF('', 'pt', 'a4')
            // 有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
            // 当内容未超过pdf一页显示的范围,无需分页
            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')
          })
        }
      },
    }
    
    

    不分页处理:

    import html2Canvas from 'html2canvas'
    import JsPDF from 'jspdf'
    export default {
      install (Vue, options) {
        Vue.prototype.getPdf = function (idStr, title) {
          html2Canvas(document.querySelector('#' + idStr), {
            // allowTaint: true,
            useCORS: true,
            // scale: 2, // 提升画面质量,但是会增加文件大小
          }).then((canvas) => {
            const contentWidth = canvas.width
            const contentHeight = canvas.height
             
             /* 导出不分页处理 */
            const pageData = canvas.toDataURL('image/jpeg', 1.0)
    
            const pdfWidth = (contentWidth + 10) / 2 * 0.75
            const pdfHeight = (contentHeight + 200) / 2 * 0.75 // 500为底部留白
    
            const imgWidth = pdfWidth
            const imgHeight = (contentHeight / 2 * 0.75) // 内容图片这里不需要留白的距离
    
            const PDF = new JsPDF('', 'pt', [ pdfWidth, pdfHeight, ])
            PDF.addImage(pageData, 'jpeg', 0, 0, imgWidth, imgHeight)
            PDF.save(title + '.pdf')
          })
        }
      },
    }
    
    

    3, 全局引入实现方法
    在项目主文件中引入定义好的实现方法,并注册

    import htmlToPdf from '@/scripts/common/utils/htmlToPdf'
    // 使用Vue.use()方法就会调用工具方法中的install方法
    Vue.use(htmlToPdf)
    

    4, 在相关要导出的页面中,点击时调用绑定在Vue原型上的getPdf方法,传入id即可

    <div id="pdfDom">
    	//给自己需要导出的ui部分.定义id为"pdfDom".此部分将就是pdf显示的部分
    </div>
    <el-button @click="export">导出PDF</el-button>
    
    export default {
    	data () {
    		return {
    			fileName: '页面导出PDF文件名'
    		}
    	}
    	methods:{
    		export () {
    			this.getPdf('pdfDom', this.fileName)
    		}
    	} 
     }
    

    问题:

    • 分页:jspdf需要使用高度较小的图片,图片高度越小,分页效果就越好。

    • pdf清晰度:如果利用了echart之类,一定要用它给的api获取dataURL,设置分辨率倍数多一点,导出的图片非常清晰,这样生产的pdf才会清晰。如果是普通元素,如果发现导出的图片不够清晰,可以专门写一个用于导出的页面。此页面所有内容都放大2 倍,然后设置left:-9999隐藏(不可display:none)。当html2canvas转换此页面的为图片的时候,图片会非常大,然后使用pdf编辑工具让图片等比缩放,会很清晰。html2canvas option里也有个scale参数,也可以调,但太大会报错。

    方式二:调用浏览器自身的方法。

    window.print() 来打印(打印时可选下载),打印比较清晰,但存在浏览器兼容问题,适用于谷歌。

    展开全文
  • 在实际应用中,可能用户希望将系统中一个页面展示的所有数据报 表,用PDF的文件格式下载下来,以便于其他用途。...本篇描述的就是,在Vue 2.0 的项目中,遇到类似的需求, 如何将需要的部分页面内容导出PDF文件
  • 前端VUE导出PDF

    2021-07-29 09:12:30
    导出PDF图片参考步骤1、安装...2、vue 项目导出pdf两种方式 (作者:丿乐灬学) 3、一个导出pdf的完整demo,可以直接拿来使用 (作者:丿乐灬学) 步骤 1、安装需要的包 npm install --save html2canvas npm install

    参考

    1、Vue 导出PDF文件,导出pdf模糊,导出图片不全,导出不清晰问题终极解决方案 (作者:IT程序员的日常)

    2、vue 项目导出pdf两种方式 (作者:丿乐灬学)

    3、一个导出pdf的完整demo,可以直接拿来使用 (作者:丿乐灬学)

    步骤

    1、安装需要的包

    npm install --save html2canvas  
    npm install --save jspdf 
    

    2、写一个工具JS,打印界面打印时用来调用

    建议直接写在\src\until下
    在这里插入图片描述
    htmlToPdf.js里的内容

    ———————————————————————————————————————————————————————————————————————————————————
    版权声明:本文为CSDN博主「丿乐灬学」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/qq_37880968/article/details/94626001
    ———————————————————————————————————————————————————————————————————————————————————
    
    /* eslint-disable */
    //不使用JQuery版的
    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,
            // 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, 0, 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
    }
    ———————————————————————————————————————————————————————————————————————————————————
    版权声明:本文为CSDN博主「丿乐灬学」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/qq_37880968/article/details/94626001
    ———————————————————————————————————————————————————————————————————————————————————
    

    2、在需要打印的界面直接导入

    <template>
    <el-dialog>
     <div style="overflow-y: auto;max-height: 700px">
          //这个id用来打印
          <div id="demo">
          <el-button @click="handleDown">下载</el-button>
             导出PDF的内容
         </div>
         </div>
     </el-dialog>
     </template>
    <script>
     import htmlToPdf from '@/utils/htmlToPdf'
     export default {
      data() {
        return {};
      },
      methods: {
       //点击下载
       //#demo为要打印界面标签Id
        handleDown(){
         htmlToPdf.downloadPDF(document.querySelector('#demo'),'采购订单')
        },
      } 
    };
    </script>
    

    3、解决内容截取不全、模糊等问题

    1、截断、内容不全
    我需要打印element的el-dialog里的内容,但是用这个方法会被截断,内容显示不全。最后研究了下作者给的demo,问题得到解决。
    解决方法:要打印的内容外套一层div,并添加下拉列表

    //下拉列表
    <div style="overflow-y: auto;max-height: 700px">
         //这个id用来打印
         <div id="demo">
            导出的PDF内容
        </div>
        </div>
    

    2、模糊
    (1)加大字体,加深字体颜色,调整id="demo"的位置
    (2)(Vue 导出PDF文件,导出pdf模糊,导出不清晰问题终极解决方案
    ),因为这个是vip看完整,我就不贴代码了,淘宝花两块钱可以看到,有效果,但最后效果差别不大。

    4、最后

    一个导出pdf的完整demo (作者:丿乐灬学)
    这个demo可以运行,特别推荐下载研究下。

    展开全文
  • vue导出pdf 新需求:需要前端下载把当前html下载成pdf文件 菜鸟觉得牛逼啊,这必须记录下来嗷嗷嗷嗷 1、第一步:我们要添加两个模块 //第一个:将页面html转换成图片 npm install --save html2canvas //第二个:将...

    vue导出pdf

    新需求:需要前端下载把当前html下载成pdf文件
    菜鸟觉得牛逼啊,这必须记录下来嗷嗷嗷嗷
    1、第一步:我们要添加两个模块

    //第一个:将页面html转换成图片
    npm install --save html2canvas
    //第二个:将图片生成pdf
    npm install jspdf --save
    

    2、第二步:

    定义全局函数…创建一个htmlToPdf.js文件在指定位置.我个人习惯放在('src/components/utils/htmlToPdf’)中
    htmlToPdf.js文件内容:

    // 导出页面为PDF格式
    import html2Canvas from 'html2canvas'
    import JsPDF from 'jspdf'
    export default {
      install(Vue, options) {
        Vue.prototype.getPdf = function () {
          var title = this.htmlTitle
          // html2Canvas(document.querySelector('#pdfDom'), { //这是在界面上设置一个id 
          //只下载id为pdfDom的内容
          html2Canvas(document.body, { //body是下载整个界面
            useCORS: true, //是否尝试使用CORS从服务器加载图像
            allowTaint: true,
            dpi: 300, //解决生产图片模糊
            // width: 490, //canvas宽度
            // height: 240, //canvas高度
            // x: 0, //x坐标
            // y: 0, //y坐标
            async: false, //是否异步解析和呈现元素
            foreignObjectRendering: true, //是否在浏览器支持的情况下使用ForeignObject渲染
          }).then(function (canvas) {
            let contentWidth = canvas.width
            let contentHeight = canvas.height
            let pageHeight = contentWidth / 592.28 * 841.89 // 一页pdf显示html页面生成的canvas高度;
            let leftHeight = contentHeight //未生成pdf的html页面高度
            let position = 0 //pdf页面偏移
            //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
            let imgWidth = 595.28
            let imgHeight = 592.28 / contentWidth * contentHeight
            let pageData = canvas.toDataURL('image/jpeg', 1.0)
            let PDF = new JsPDF('', 'pt', 'a4')
            // 有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
            //当内容未超过pdf一页显示的范围,无需分页
            if (leftHeight < pageHeight) {
              PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
            } else {
              while (leftHeight > 0) {
                PDF.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
                leftHeight -= pageHeight
                position -= 841.89
                if (leftHeight > 0) {
                  PDF.addPage()
                }
              }
            }
            PDF.save(title + '.pdf')
          })
        }
      }
    }
    

    3、第三步:在main.js中使用我们定义的函数文件

    import htmlToPdf from '@/components/utils/htmlToPdf'
    Vue.use(htmlToPdf)
    

    4、第四步:在需要的导出的页面,调用我们在htmlToPdf.js定义的getPdf方法即可.
    我是在登录界面调的,所以我在Login.html的模板中写的

       <template>
         <el-button type="primary" @click="getPdf()">下载pdf</el-button>
        <!-- 给自己需要导出的ui部分.定义id为"pdfDom".此部分将就是pdf显示的部分 -->
        <div class="login_box" id="pdfDom">
       <!--图片区域-->
       <div class="avatar_box">
            <img src="../assets/logo.png" />
          </div>
        </div>[添加链接描述](https://www.jianshu.com/p/dd120b65446a)
        </template>
    

    然后在

       <script>
    export default {
      data() {
        return {
          htmlTitle: "页面导出PDF文件名", //这是定义导出的名字,不写这个默认下载的名字是undefinded
            }
          }
        }
      </script>
    

    时隔一年,我又回来了,虽然还是菜,但是感觉比之前进步了不少,还得继续加油,上一年没继续写,是因为去了一件信息安全要求比较高的公司,不许上微信,不允许贴代码啥的,回到家我又没记住那代码,所以就没更,现在换了一家公司,以后我会坚持的!一起加油啊!!

    这篇主要是看了这篇文章,期间加了一点自己实验得出的结果注释还有一些改动:https://www.jianshu.com/p/dd120b65446a

    展开全文
  • vue页面导出pdf

    2020-06-23 11:29:04
    1、下载插件: ...npm install jspdf --save //将图片生成pdf 2、.在utils文件夹中新建 ...// 导出页面为PDF格式 import html2Canvas from "html2canvas"; import JsPDF from "jspdf"; export default { inst
  • Vue——导出pdf

    2020-03-31 16:14:36
    一、安装依赖项 npm i html2canvas npm i jspdf 二、utils/exportPdf.js import ...import JsPDF from 'jspdf' export default{ install (Vue, options) { Vue.prototype.getPdf = funct...
  • 前端使用vue实现导出pdf

    千次阅读 2020-09-12 15:26:56
    前端使用vue实现导出pdf 使用html2canvas和jspdf插件实现 这个方式是通过html2canvasl来把html页面转换成图片,然后再通过jspdf将图片转换为pdf文件 这个方法有个非常不好的缺点 生成的pdf质量不高,画面有些模糊,...
  • 基于VUE实现导出PDF功能

    千次阅读 2020-03-23 22:18:55
    目前有两种方法, 1.... 2.用window.print()方法。 介于第二种方法在目前的JIVF框架...调用导出方法 上面四步就能实现导出pdf功能啦,建议在导出的时候加下加载条,或者友好的提示告诉用户在下载中,因为前台导出需要时间~
  • VUE项目截图页面导出PDF 首先我也是去百度了一下方法,来自这个老哥的文章 VUE中将页面导出为图片或者PDF 但是一顿操作之后就遇到了另一个问题 如何在Vue中获取想要的dom元素 便了解了一下方法,首先想获取被vue渲染...
  • vue 项目pdf导出问题

    2020-11-06 12:12:34
    一、新建文件htmlToPdf.js ...import JsPDF from ‘jspdf’ export default { install(Vue, options) { Vue.prototype.getPdf = function () { window.pageYOffset = 0; document.documentElement.scrollTop = 0
  • 采购订单 采购方:{{faceResult.fromWarehouseName}}订购单号:{{faceResult.orderSn}}联系人:{{faceResult.mobile}}订购日期:{{faceResult.contacter}}电话:{{faceResult.distributionPlace}}供应商:{{...
  • Vue导出PDF

    2021-03-27 11:11:13
    使用vue-to-pdf https://www.npmjs.com/package/vue-to-pdf npm i vue-to-pdf --save 引入: import vueToPdf from 'vue-to-pdf'; Vue.use(vueToPdf); 使用时, 将要转PDF的内容包裹在一个div里面, 给这个div加一个...
  • vue项目导出PDF的两种方式

    千次阅读 2019-05-03 17:29:00
    参考大家导出的方式,基本上是如下两种: 1.使用 html2Canvas + jsPDF 导出PDF, 这种方式什么都好,就是下载的pdf太模糊了。对要求好的pdf这种方式真是不行啊!...两种导出pdf清晰度对比: -------------...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,200
精华内容 880
关键字:

vue项目导出pdf

vue 订阅