use finish pdf strategy logic

pull/3395/head
Joseph Izang 2 years ago
parent ef7107cc43
commit 5a78b0f0c3
  1. 60
      libs/remix-ui/solidity-uml-gen/src/lib/utilities/UmlDownloadStrategy.ts
  2. 1
      package.json
  3. 12
      yarn.lock

@ -1,6 +1,7 @@
import jsPDF from 'jspdf'
import 'svg2pdf.js'
const jsPdf = new jsPDF('landscape', 'px', 'a4')
interface IUmlDownloadStrategy {
@ -17,38 +18,55 @@ class PdfUmlDownloadStrategy implements IUmlDownloadStrategy {
public download (uml: string, fileName: string): void {
const parser = new DOMParser()
const parsedDocument = parser.parseFromString(uml, 'image/svg+xml')
const element = parsedDocument.getElementsByTagName('svg')[0]
const element = parsedDocument.documentElement
const pageWidth = this.doc.internal.pageSize.getWidth()
const pageHeight = this.doc.internal.pageSize.getHeight()
const widthScale = pageWidth / parseInt(element.getAttribute('width'))
const heightScale = pageHeight / parseInt(element.getAttribute('height'))
const scale = Math.min(widthScale, heightScale)
element.setAttribute('width', (parseInt(element.getAttribute('width')) * scale).toString())
element.setAttribute('height', (parseInt(element.getAttribute('height')) * scale).toString())
console.log({ element, pageWidth, pageHeight, widthScale, heightScale, scale })
this.doc.svg(element, {
x: 20,
y: 20,
width: this.doc.internal.pageSize.getWidth() - 20,
height: this.doc.internal.pageSize.getHeight() - 40
x: 10,
y: 10,
width: pageWidth,
height: pageHeight
}).then(() => {
const pages = this.doc.internal.pages
console.log({ pages })
this.doc.save(fileName.split('/')[1].split('.')[0].concat('.pdf'))
}).catch((err) => {
console.log(err)
})
// const options = {
// filename: fileName.split('/')[1].split('.')[0].concat('.pdf')
// }
// downloadPdf(element, options, function(t) {
// console.log({ t })
// })
}
}
class ImageUmlDownloadStrategy implements IUmlDownloadStrategy {
public download (uml: string, fileName: string): void {
const svg = new Blob([uml], { type: 'image/svg+xml;charset=utf-8' })
const url = URL.createObjectURL(svg)
const img = new Image()
img.onload = () => {
const canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
const ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0)
const png = canvas.toDataURL('image/png')
const a = document.createElement('a')
a.download = fileName.split('/')[1].split('.')[0].concat('.png')
a.href = png
a.click()
}
img.src = url
// const svg = new Blob([uml], { type: 'image/svg+xml;charset=utf-8' })
// const url = URL.createObjectURL(svg)
// const img = new Image()
// img.onload = () => {
// const canvas = document.createElement('canvas')
// canvas.width = img.width
// canvas.height = img.height
// const ctx = canvas.getContext('2d')
// ctx.drawImage(img, 0, 0)
// const png = canvas.toDataURL('image/png')
// const a = document.createElement('a')
// a.download = fileName.split('/')[1].split('.')[0].concat('.png')
// a.href = png
// a.click()
// }
// img.src = url
// }
}
}

@ -153,7 +153,6 @@
"core-js": "^3.6.5",
"deep-equal": "^1.0.1",
"document-register-element": "1.13.1",
"dom-to-pdf": "^0.3.1",
"eslint-config-prettier": "^8.5.0",
"ethers": "^5.4.2",
"ethjs-util": "^0.1.6",

@ -11473,18 +11473,6 @@ dom-serializer@^2.0.0:
domhandler "^5.0.2"
entities "^4.2.0"
"dom-to-image@https://github.com/dmapper/dom-to-image":
version "2.6.0"
resolved "https://github.com/dmapper/dom-to-image#a7c386a8ea813930f05449ac71ab4be0c262dff3"
dom-to-pdf@^0.3.1:
version "0.3.1"
resolved "https://registry.yarnpkg.com/dom-to-pdf/-/dom-to-pdf-0.3.1.tgz#06db966acc73a7b81ce183202f7b6ff1f5f38578"
integrity sha512-2duxMNttyQr5XySV2t7gftCVhHr+zoE/f1h0nQDp/1KugAsk07EkZ9zcPFgZihcyj4dXBUWyVSxOik8czuFGDQ==
dependencies:
dom-to-image "https://github.com/dmapper/dom-to-image"
jspdf "^2.5.1"
dom-walk@^0.1.0:
version "0.1.2"
resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"

Loading…
Cancel
Save