jspdf导出PDF文件

最新推荐文章于 2024-01-08 18:28:05 发布
最新推荐文章于 2024-01-08 18:28:05 发布
阅读量1.6k 收藏 5
点赞数
文章标签： pdf vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaochenhui0435/article/details/127908774
版权

1.vue create pdf   --------创建名为pdf的vue项目

2.npm install element-ui,pdfjs,jspdf-autotable  ---安装三个必备的依赖包
3.main.js里边添加引用

import elementui from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(elementui)
import less from 'less'
Vue.use(less)

4.引入一个解决中文乱码文件的字体文件font.js
5.正文demo

<template>
  <div id="PdfPage2">
    <button type="button" @click="downloadPdf">导出PDF</button>

    <div id="pdfDom" style="background: #fff">
      <el-form
        style="margin: 0 auto; text-align: center"
        ref="DialogForm"
        :model="DialogForm"
        label-width="120px"
        size="mini"
      >
        <div style="border-bottom: 1px dashed #ccc; padding-bottom: 20px">
          <el-form-item label="场地长度(米)" prop="length" style="width: 45%; display: inline-block; border: none">
            <el-input
              v-model.number="DialogForm.length"
              autocomplete="off"
              placeholder="请输入场地长度"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="场地宽度(米)" prop="width" style="width: 45%; display: inline-block">
            <el-input
              v-model.number="DialogForm.width"
              autocomplete="off"
              placeholder="请输入场地宽度"
              clearable
            ></el-input>
          </el-form-item>
          <div style="border-top: 1px dashed #ccc; padding-top: 20px">
            <el-form-item label="原点位于方位" prop="direction">
              <!-- <el-input
                  v-model.number="DialogForm.width"
                  autocomplete="off"
                  placeholder="请输入方向(如：东南/西南/西北/东北)"
                  clearable
                ></el-input> -->
              <el-select
                v-model="DialogForm.direction"
                placeholder="请选择"
                style="width: 100%"
                @change="directionChange"
                clearable
              >
                <el-option v-for="item in directionArr" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <div style="background: #fcd7bd">
              <p style="color: #cd4201; font-size: 12px">场所空间默认按照正规房间方位朝向，请自行判断方位！</p>
            </div>
          </div>
        </div>
      </el-form>
      <div style="border-bottom: 1px dashed #ccc; padding-bottom: 20px; text-align: center">
        <el-table :data="stationData" stripe border style="margin-left: 40%" max-height="470px">
          <el-table-column label="序号" type="index" width="50px" align="center" fixed>
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="x" prop="x" width="120px" align="center" fixed> </el-table-column>
          <el-table-column label="y" prop="y" width="120px" align="center"></el-table-column>
        </el-table>
      </div>
      <div class="tableBox">
        <el-table id="indexTable1" :data="innerData" stripe border style="width: 100%" max-height="470px">
          <el-table-column label="序号" type="index" width="50px" align="center" fixed>
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="imsi" prop="imsi" width="120px" align="center" fixed> </el-table-column>
          <el-table-column label="imei" prop="imei" width="120px" align="center"></el-table-column>
          <el-table-column label="手机号" prop="isdn" width="120px" align="center"></el-table-column>
          <el-table-column label="手机型号" prop="model" width="120px" align="center"></el-table-column>
          <el-table-column label="运营商" prop="vendortype" align="center"></el-table-column>
        </el-table>
        <el-table id="indexTable2" :data="innerData" stripe border style="width: 100%" max-height="470px">
          <el-table-column label="序号" type="index" width="50px" align="center" fixed>
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="imsi" prop="imsi" width="120px" align="center" fixed> </el-table-column>
          <el-table-column label="imei" prop="imei" width="120px" align="center"></el-table-column>
          <el-table-column label="手机号" prop="isdn" width="120px" align="center"></el-table-column>
          <el-table-column label="手机型号" prop="model" width="120px" align="center"></el-table-column>
          <el-table-column label="运营商" prop="vendortype" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
// import $ from "jquery";

import { jsPDF as JsPDF } from 'jspdf'
import 'jspdf-autotable'
import pdfFont from './utils/fonts' //引入字体js文件，解决中文乱码
export default {
  name: 'PdfPage2',
  data() {
    return {
      innerData: [
        {
          imsi: '1234567890',
          imei: '1234567890',
          isdn: '1234567890',
          model: '华为',
          vendortype: '电信'
        },
        {
          imsi: '1234567890',
          imei: '1234567890',
          isdn: '1234567890',
          model: '小米',
          vendortype: '移动'
        },
        {
          imsi: '1234567890',
          imei: '1234567890',
          isdn: '1234567890',
          model: '苹果',
          vendortype: '电信'
        },
        {
          imsi: '1234567890',
          imei: '1234567890',
          isdn: '1234567890',
          model: '荣耀',
          vendortype: '联通'
        },
        {
          imsi: '1234567890',
          imei: '1234567890',
          isdn: '1234567890',
          model: '华为',
          vendortype: '移动'
        },
        {
          imsi: '1234567890',
          imei: '1234567890',
          isdn: '1234567890',
          model: '荣耀',
          vendortype: '联通'
        },
        {
          imsi: '1234567890',
          imei: '1234567890',
          isdn: '1234567890',
          model: '华为',
          vendortype: '移动'
        },
        {
          imsi: '1234567890',
          imei: '1234567890',
          isdn: '1234567890',
          model: '荣耀',
          vendortype: '联通'
        },
        {
          imsi: '1234567890',
          imei: '1234567890',
          isdn: '1234567890',
          model: '华为',
          vendortype: '移动'
        },
        {
          imsi: '1234567890',
          imei: '1234567890',
          isdn: '1234567890',
          model: '荣耀',
          vendortype: '联通'
        },
        {
          imsi: '1234567890',
          imei: '1234567890',
          isdn: '1234567890',
          model: '华为',
          vendortype: '移动'
        },
        {
          imsi: '1234567890',
          imei: '1234567890',
          isdn: '1234567890',
          model: '华为',
          vendortype: '移动'
        },
        {
          imsi: '1234567890',
          imei: '1234567890',
          isdn: '1234567890',
          model: '荣耀',
          vendortype: '联通'
        },
        {
          imsi: '1234567890',
          imei: '1234567890',
          isdn: '1234567890',
          model: '华为',
          vendortype: '移动'
        },
        {
          imsi: '1234567890',
          imei: '1234567890',
          isdn: '1234567890',
          model: '华为',
          vendortype: '移动'
        },
        {
          imsi: '1234567890',
          imei: '1234567890',
          isdn: '1234567890',
          model: '荣耀',
          vendortype: '联通'
        },
        {
          imsi: '1234567890',
          imei: '1234567890',
          isdn: '1234567890',
          model: '华为',
          vendortype: '移动'
        },
        {
          imsi: '1234567890',
          imei: '1234567890',
          isdn: '1234567890',
          model: '华为',
          vendortype: '移动'
        },
        {
          imsi: '1234567890',
          imei: '1234567890',
          isdn: '1234567890',
          model: '荣耀',
          vendortype: '联通'
        },
        {
          imsi: '1234567890',
          imei: '1234567890',
          isdn: '1234567890',
          model: '华为',
          vendortype: '移动'
        }
      ],
      outerData: [
        {
          imsi: '1234567890',
          imei: '1234567890',
          isdn: '1234567890',
          model: '华为',
          vendortype: '电信'
        },
        {
          imsi: '1234567890',
          imei: '1234567890',
          isdn: '1234567890',
          model: '小米',
          vendortype: '移动'
        },
        {
          imsi: '1234567890',
          imei: '1234567890',
          isdn: '1234567890',
          model: '苹果',
          vendortype: '电信'
        },
        {
          imsi: '1234567890',
          imei: '1234567890',
          isdn: '1234567890',
          model: '荣耀',
          vendortype: '联通'
        },
        {
          imsi: '1234567890',
          imei: '1234567890',
          isdn: '1234567890',
          model: '华为',
          vendortype: '移动'
        }
      ],
      stationData: [
        { x: 1, y: 2 },
        { x: 1, y: 2 },
        { x: 1, y: 2 },
        { x: 1, y: 2 },
        { x: 1, y: 2 }
      ],
      DialogForm: {
        width: 40,
        length: 40,
        direction: 1,
        domains: [
          {
            x: 2,
            y: 35
          },
          {
            x: 38,
            y: 5
          },
          {
            x: 35,
            y: 37
          },
          {
            x: 5,
            y: 5
          }
        ]
      },
      directionArr: [
        { value: 1, label: '东南' },
        { value: 2, label: '西南' },
        { value: 3, label: '东北' },
        { value: 4, label: '西北' }
      ],
      originObj: {
        xValue: '东',
        yValue: '南'
      },
      htmlTitle: '页面导出PDF文件名',
      score: '100'
    }
  },
  methods: {
    downloadPdf() {
      const doc = new JsPDF('p', 'pt') // 获取实例
      // const res = doc.autoTableHtmlToJson(
      //   document.getElementById("indexTable")
      // );
      const res = this.innerData
      console.log('res', res)
      // 设置中文字体
      // doc.addFileToVFS("ok.ttf", myFont);
      // doc.addFont("ok.ttf", "myFont", "normal");
      // doc.setFont("myFont");
      doc.addFileToVFS('msyh-normal.ttf', pdfFont)
      doc.addFont('msyh-normal.ttf', 'myFont', 'normal')
      doc.setFont('myFont')

      // doc.addFileToVFS("gbsn00lp-2-normal.ttf", font);
      // doc.addFont("gbsn00lp-2-normal.ttf", "gbsn00lp-2", "normal");
      // doc.setFont("font");
      doc.format = [595.28, 841.89]
      doc.autoTable({
        styles: {
          //设置表格的字体，不然表格中文也乱码
          fillColor: [255, 255, 255],
          font: 'myFont',
          textColor: [0, 0, 0],
          halign: 'left',
          fontSize: 12
        },
        headStyles: { lineWidth: 1, halign: 'center' },
        columnStyles: {
          0: { valign: 'middle', cellWidth: 50 },
          1: { valign: 'middle', cellWidth: 50 },
          2: { valign: 'middle' },
          3: { valign: 'middle', cellWidth: 200 },
          4: { valign: 'middle', minCellWidth: 30 } // 第4列居中,宽度最小30
        },
        theme: 'grid', // 主题
        startY: 80, // 距离上边的距离
        margin: 20, // 距离左右边的距离
        body: res, // 表格内容
        columns: [
          // 表头
          { header: 'imsi', dataKey: 'imsi' },
          { header: 'imei', dataKey: 'imei' },
          { header: '手机号', dataKey: 'isdn' },
          { header: '手机型号', dataKey: 'model' },
          { header: '运营商', dataKey: 'vendortype' }
        ]
      })

      const pageWidth = doc.getPageWidth() // A4纸:595.28
      const x1 = (pageWidth - doc.getTextWidth(this.htmlTitle)) / 2
      console.log(x1, '123')


      const totalPages = doc.internal.getNumberOfPages() // 获取当前doc的页数

      for (let i = 1; i <= totalPages; i++) {
        if (i == 1) {
          doc.setPage(i) // 通过循环，跳转至相应的页进行设置
          // 后面可以进行相应的数据写入操作了，例如以下的添加水印操作
          doc.setTextColor(150)
          doc.text(10, 20, 'Watermark')
          doc.text(20, 60, `总分:${this.score}`)
                doc.text(x1, 40, this.htmlTitle) // x坐标,y坐标,文字
      doc.setFontSize(12) // 设置文字大小,下一行起有效
          doc.save(`${this.htmlTitle}-大数据指数.pdf`)
        }
      }
    },
    // 设置原点
    directionChange(val) {
      console.log('select', val)
      if (val == 1) {
        this.originObj.xValue = '东'
        this.originObj.yValue = '南'
      } else if (val == 2) {
        this.originObj.xValue = '西'
        this.originObj.yValue = '南'
      } else if (val == 3) {
        this.originObj.xValue = '东'
        this.originObj.yValue = '北'
      } else if (val == 4) {
        this.originObj.xValue = '西'
        this.originObj.yValue = '北'
      }
      this.$refs.scatter.draw()
    },
    removeDomain(item) {
      if (this.DialogForm.domains.length < 3) {
        this.$message.warning('监测点至少应设置3个,无法删除！')
        return
      }
      var index = this.DialogForm.domains.indexOf(item)
      if (index !== -1) {
        this.DialogForm.domains.splice(index, 1)
      }
    },
    addDomain() {
      if (this.DialogForm.domains.length >= 6) {
        this.$message.warning('监测点最多支持6个,暂时不适配更多监测点！')
        return
      }
      this.DialogForm.domains.push({
        x: null,
        y: null,
        key: Date.now()
      })
      console.log('添加监测点', this.DialogForm)
    }
  }
}
</script>

<style scoped>
.content {
  height: calc(100vh - 100px);
}
@media print {
  /* 打印页面样式  */
  .noprint {
    display: none;
  }
  .Front {
    background-color: white;
    /* background: url(../assets/beijng.jpg); */
    background-size: 100% 100%;
  }
  .buttonNoPrint {
    display: none;
  }
  .Header {
    display: none;
  }
  .Headers {
    display: none;
  }
  body {
    -webkit-print-color-adjust: exact;
    -moz-print-color-adjust: exact;
    -ms-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #pdfDom {
    /* width: 1078px;
            height: 1568px;
            height: 7200px;
             border: 1px #000 solid; */
    border-bottom: white;
    margin: 0 auto;
    /* margin-left: 1%;
            margin-top: 1%; */
  }

  /* 配置页眉页脚的边距，宽度 */
  @page {
    size: auto !important;
    /* margin: 3mm !important; */
    margin: 1.5em 1.5em 1.5em;
  }
}
</style>

6.导出效果图

 

高晨辉@610709891.qq.com
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
（已解决）jspdf + html2canvas实现导出html为PDF文件（高清、分页）解决图片和表格被分割截断以及滚动条的问题。（含源码及详细解释）
c1007857613的专栏
05-30 1001
jspdf + html2canvas实现导出html为PDF文件（高清、分页）解决图片和表格被分割截断以及滚动条的问题。（含源码及详细解释）
前端-js生成pdf文件
duangduang94的博客
04-20 9119
前端实现运用js将页面转化为pdf文件
使用jspdf插件将网页中的内容导出为高保真的pdf文件
追梦&天空的博客
08-19 2535
中文乱码时因为 JsPDF 中没有中文字体可以解析html中中文内容，解决的方法也很简单，只需要下载中文字体，然后在 JsPDF 中添加字体即可，需要注意的是，下载的字体必须是.ttf后缀的。这种方式有一个问题就是中文乱码，英文内容导出不受影响，解决中文乱码的方式也很简单，下面会详细说到。如果想要修改打印出来的样式，也可以使用CSS3媒体查询的方式，对打印内容的样式进行单独处理。这种方式的一个缺陷就是图片会被压缩或放大，导致图片上的内容会失真出现模糊的现象。方法一共有两个参数。方法一共有两个参数。.....
JS打印、导出PDF
qq_42660374的博客
03-14 2863
JS打印、导出PDF
如何使用jsPDF 生成 pdf 文档
boyla333的博客
05-26 1819
{“pdfImgName”:“施工流程图1”,“width”:40,“height”:40,“src”:“data:image/gif;{“pdfImgName”:“图片名称”,“width”:图片宽度,“height”:图片高度,“src”:“图片base64编码”}主页点击蓝色"配置模版"链接，即可跳转配置页面，用于增删改章节模版，右侧填完提交，再点上方 保存配置，就会把所有配置保存到本地。在模版中插入特定的的花括号{}包裹的内容可以插入图片和一些模版参数，下面分别是插入方法。
javascript pdf导出
weixin_52594202的博客
12-07 527
【代码】pdf导出。
Html转PDF，前端JS实现Html页面导出PDF（html2canvas+jspdf）
热门推荐
qq_45830276的博客
12-10 1万+
当我们在不想改变后端代码的同时想是纯html页面导出PDF，那么（html2canvas+jspdf）就是无疑最好的选择，导出时它不占用我们服务器的资源，而是由用户本地自行执行js文件下载PDF，不占用我们系统的带宽，所以这无非是最好的选择方式
jspdf导出pdf.7z
07-07
这个"jspdf导出pdf.7z"压缩包包含了与JSPDF相关的资源，用于在不同浏览器上实现HTML到PDF的转换。 JSPDF是一个开源项目，由亚历山大·阿斯克(Alexander Maslennikov)创建，它的核心理念是在客户端生成PDF，无需...
jspdf导出pdf
10-09
`jspdf`是一个JavaScript库，专门用于生成PDF文档，它允许开发者在浏览器端创建高质量的PDF文件。这个教程将深入探讨如何使用`jspdf`库以及与之配合的jQuery插件来实现PDF导出功能。 ### jspdf库介绍 `jspdf`...
使用jspdf生成pdf报表
12-08
首先，jspdf是一个JavaScript库，允许开发者在浏览器端生成PDF文件。它支持基本的HTML元素转换，但对HTML样式和某些特定元素（如SVG）的支持有限。因此，要将动态生成的HTML报表转化为PDF，我们需要额外的工具和技术...
jspdf 导出页面内容
08-18
这个库特别有用，因为用户可以在不离开网页的情况下下载包含网页内容的PDF文件，提高了用户体验。`jspdf`支持多种功能，包括文本、图像、形状、表格等元素的插入，以及自定义字体、样式和布局。 **ie 兼容性** 在...
jsPDF(用 JS 生成 PDF).zip
07-13
jsPDF 是一个免费的 JavaScript 类库，可以用来创建 PDF 文件，不需要服务器端支持。它支持文本（含格式），画图和图片。       jsPDF 是一个使用Javascript语言生成PDF的开源库。你可以在Firefox插件，服务端脚本或是浏览器脚本中使用它。       客户端Safari 和 iPhone Safari 支持得最好,其次是Opera和Windows下的Firefox 3等。IE暂不支持。
imgtopdf:基于html2canvas jspdf导出更加清晰的图片以及pdf
05-06
multiple：放大倍数，放大一定的倍数显示原来大小的图片或者pdf提高清晰度isPdf ：是否导出pdf，默认falsepdfName ： 导出的文件名称函数默认返回一个promise，promise中的data:{img,canvas}img 生成的图片canvas ...
后端Nodejs + 前端Vue 实现 HTML 转 PDF 并导出（方案二：puppeteer nodejs express 实现）
RosaChampagne的博客
08-04 2831
后端Nodejs + 前端Vue 实现 HTML 转 PDF 并导出（方案二：puppeteer nodejs express 实现）
js页面导出为pdf
qq_43513271的博客
07-24 292
js生成pdf
一篇文章介绍前端PDF导出方案、html2canvas+jsPDF、导出canvas柱状图为PDF
superherooooss的博客
02-06 4126
在前端浏览器所有操作中也不存在需要消耗大量CPU计算的场景，可以短时间内完成组装生成PDF。方案，如果在搜索引擎搜索类似“ECharts导出PDF的字样”，大部分都是采用这一方案。导出速度快：所有操作都在前端浏览器发生，不涉及与服务器之间的操作。1.将用于绘制图表的原始数据或用于获取这些数据的参数发送给后端。若追求PDF导出文档质量，则可采用后端截图+后端排版的方案，如。若追求PDF导出速度，则采用前端截图+前端排版的方案，如。这样的专业排版工具实现高质量的文档排版，呈现精致的报表。
导出pdf（带有echarts图表）
zkkwe的博客
01-08 595
1：安装html2canvas 与 jspdf依赖。2：创建exportPdf.js。3：在需要导出的组件中引入。4：点击按钮时执行导出事件，将需要导出的html与echarts图表装进一个容器里。5：点击按钮执行事件。
纯前端js html2canvas导出pdf页面 自动分页 检测空白页 解决图片跨域问题
java小白白之没有最白的博客
02-24 8671
首先引入js <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script> 其次定义一个点击导出的按钮（我用的时layui，你们可以随便设置，只要是
Vue生成PDF文件攻略：html2canvas与jspdf联手，中文乱码与自动换行难题攻克
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
11-13 5299
在做项目时有这么一个需求，需要将当前页面指定区域的内容导出pdf到本地。使用过程中遇到的问题及解决方法。需要一个支持中文的字体ttf文件，可以在网上下载，也可以使用本地window/font/路径下的文件。选择你本地的ttf文件，点击“Create”按钮，会生成一个js文件。上面乱码解决了，但是发现中文字不会自动换行。这个还需要进一步解决。如果是直接使用jsPDF生成pdf文件，中文是乱码。在导出多页的时候，希望在页面尾部添加页码。里面有个fontconverter目录。在页面中引入js文件。
jspdf watermark
最新发布
03-09
jspdf watermark是一个用于在PDF文档中添加水印的JavaScript库。它基于jspdf库，可以在生成的PDF文档中添加自定义的水印内容，如文字、图片等。 使用jspdf watermark可以通过以下步骤实现添加水印： 1. 引入jspdf和jspdf watermark库文件到你的项目中。 2. 创建一个jspdf实例。 3. 使用jspdf的方法添加水印，可以是文字或者图片。 4. 保存生成的PDF文档。 以下是一个示例代码，演示如何使用jspdf watermark添加文字水印： ```javascript // 引入jspdf和jspdf watermark库文件 <script src="jspdf.min.js"></script> <script src="jspdf.plugin.watermark.js"></script> // 创建一个jspdf实例 var doc = new jsPDF(); // 添加水印 doc.addWatermark({ text: 'Watermark Text', // 水印文字内容 color: 'gray', // 水印颜色 opacity: 0.2, // 水印透明度 fontSize: 40, // 水印字体大小 angle: 45, // 水印旋转角度 }); // 保存生成的PDF文档 doc.save('watermark.pdf'); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值