前端：富文本(html)转化pdf上传接口

最新推荐文章于 2024-05-30 11:27:58 发布

恋小诺

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量1k

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_60387914/article/details/123084800

版权

主要通过html2canvas和jspdf两个插件实现

1.安装插件

npm install html2canvas jspdf --save

2.封装一个方法

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
import Axios from "axios";
import { getToken } from "@/utils/auth";
import moment from 'moment';

export function htmlToPdf(elementId,query){
  if (!elementId) throw new Error("请传入元素id")
  const container = document.querySelector(`#${elementId}`)
  const canvas = document.createElement("canvas")
  const contentWidth = container.clientWidth
  const contentHeight = container.clientHeight
  const scale = window.devicePixelRatio
  const canvasCcale = 4
  canvas.width = contentWidth * canvasCcale;
  canvas.height = contentHeight * canvasCcale;
  canvas.getContext("2d").scale(canvasCcale, canvasCcale);
  const opts = {
    scale