uni-app前端打印指定区域，生成pdf下载

最新推荐文章于 2024-07-16 14:46:21 发布

平头哥223

最新推荐文章于 2024-07-16 14:46:21 发布

阅读量1.2k

点赞数

文章标签： uni-app javascript vue.js

本文链接：https://blog.csdn.net/weixin_43398729/article/details/119680597

版权

本文介绍了如何使用uni-app在前端实现指定区域的PDF生成及下载功能。通过添加依赖和引用相关文件，然后编写JS代码，调用getPdf方法，可以将页面特定ID区域的内容转换为PDF并允许用户下载。

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

添加依赖

yarn add html2canvas

yarn add jspdf

引用文件

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

编写js文件

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
  install(Vue, options) {
    Vue.prototype.getPdf = function (id) {
      var title = this.htmlTitle

      var pdfDom = document.querySelector(`#${id}`)
      var width = pdfDom.offsetWidth; //dom宽
      var height = pdfDom.offsetHeight; //dom高
      var scale = 2; //放大倍数
      var opts = {
        dpi: window.devicePixelRatio * 2,
        scale: scale,//添加的scale参数
        width: width,
        height: height,
        useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
        // allowTaint: true
      };
      var canvas = document.createElement("canvas")//创建一个canvas节点
      canvas