Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
03e36ccb93 |
@@ -9,60 +9,13 @@ import EditMarkdown from "~component/items/editMarkdown"
|
|||||||
import { i18n } from "~tools"
|
import { i18n } from "~tools"
|
||||||
|
|
||||||
export default function Custom() {
|
export default function Custom() {
|
||||||
// const [codes] = useStorage("app-codes", [])
|
|
||||||
|
|
||||||
function downloadCode(index) {
|
|
||||||
sendToContentScript({ name: `custom-downloadCode`, body: { index } })
|
|
||||||
}
|
|
||||||
|
|
||||||
function pinCode(index) {
|
|
||||||
sendToContentScript({ name: `custom-scrollIntoViewCode`, body: { index } })
|
|
||||||
}
|
|
||||||
|
|
||||||
function downloadPdf() {
|
|
||||||
sendToContentScript({
|
|
||||||
name: "custom-downloadPdf"
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function downloadImg() {
|
|
||||||
sendToContentScript({
|
|
||||||
name: "custom-downloadImg"
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>{i18n("customConfig")}</legend>
|
<legend>{i18n("customConfig")}</legend>
|
||||||
{/*{codes.map((code, index) => (*/}
|
|
||||||
{/* <div className="item code" onClick={() => pinCode(index)} key={index}>*/}
|
|
||||||
{/* <span className="codeTxt">*/}
|
|
||||||
{/* {index + 1}-{JSON.stringify(code)}*/}
|
|
||||||
{/* </span>*/}
|
|
||||||
{/* <DownloadOutlined*/}
|
|
||||||
{/* style={{ color: "#52c41a", fontSize: "16px" }}*/}
|
|
||||||
{/* onClick={() => downloadCode(index)}*/}
|
|
||||||
{/* />*/}
|
|
||||||
{/* </div>*/}
|
|
||||||
{/*))}*/}
|
|
||||||
<CssCode name="custom"></CssCode>
|
<CssCode name="custom"></CssCode>
|
||||||
<EditMarkdown name="custom"></EditMarkdown>
|
<EditMarkdown name="custom"></EditMarkdown>
|
||||||
<DownloadMarkdown name="custom"></DownloadMarkdown>
|
<DownloadMarkdown name="custom"></DownloadMarkdown>
|
||||||
<DownloadHtml name="custom"></DownloadHtml>
|
<DownloadHtml name="custom"></DownloadHtml>
|
||||||
<div className="item download" onClick={downloadPdf}>
|
|
||||||
<span>
|
|
||||||
<StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
|
|
||||||
{i18n("downloadPdf")}
|
|
||||||
</span>
|
|
||||||
<DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
|
|
||||||
</div>
|
|
||||||
<div className="item download" onClick={downloadImg}>
|
|
||||||
<span>
|
|
||||||
<StarTwoTone twoToneColor="#eb2f96" style={{ marginRight: "5px" }} />
|
|
||||||
{i18n("downloadImg")}
|
|
||||||
</span>
|
|
||||||
<DownloadOutlined style={{ color: "#52c41a", fontSize: "16px" }} />
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
</fieldset>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -27,7 +27,6 @@ import { addCss, saveHtml, saveMarkdown, scrollToTop, setIcon } from "~tools"
|
|||||||
import useCssCodeHook from "~utils/cssCodeHook"
|
import useCssCodeHook from "~utils/cssCodeHook"
|
||||||
import DrawImages from "~utils/drawImages"
|
import DrawImages from "~utils/drawImages"
|
||||||
import { useContent } from "~utils/editMarkdownHook"
|
import { useContent } from "~utils/editMarkdownHook"
|
||||||
import Dom2Pdf from "~utils/html2Pdf"
|
|
||||||
import Turndown from "~utils/turndown"
|
import Turndown from "~utils/turndown"
|
||||||
|
|
||||||
const turndownService = Turndown()
|
const turndownService = Turndown()
|
||||||
@@ -187,16 +186,6 @@ export default function CustomOverlay() {
|
|||||||
saveMarkdown(markdown, articleTitle)
|
saveMarkdown(markdown, articleTitle)
|
||||||
}
|
}
|
||||||
|
|
||||||
function downloadPdf(currentDom) {
|
|
||||||
const pdf = new Dom2Pdf(currentDom, articleTitle)
|
|
||||||
pdf.downloadPdf()
|
|
||||||
}
|
|
||||||
|
|
||||||
function downloadImg(currentDom) {
|
|
||||||
const img = new Dom2Pdf(currentDom, articleTitle)
|
|
||||||
img.downloadImg()
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleOk() {
|
function handleOk() {
|
||||||
const currentDom = document.querySelector(".codebox-current")
|
const currentDom = document.querySelector(".codebox-current")
|
||||||
|
|
||||||
@@ -209,12 +198,6 @@ export default function CustomOverlay() {
|
|||||||
} else if (isDownloadType == "editMarkdown") {
|
} else if (isDownloadType == "editMarkdown") {
|
||||||
setContent(".codebox-current")
|
setContent(".codebox-current")
|
||||||
removeCurrentDom()
|
removeCurrentDom()
|
||||||
} else if (isDownloadType == "pdf") {
|
|
||||||
removeCurrentDom()
|
|
||||||
downloadPdf(currentDom)
|
|
||||||
} else if (isDownloadType == "img") {
|
|
||||||
removeCurrentDom()
|
|
||||||
downloadImg(currentDom)
|
|
||||||
}
|
}
|
||||||
isReady = false
|
isReady = false
|
||||||
isSelect = false
|
isSelect = false
|
||||||
|
|||||||
@@ -34,7 +34,6 @@
|
|||||||
"file-saver": "^2.0.5",
|
"file-saver": "^2.0.5",
|
||||||
"html2canvas": "^1.4.1",
|
"html2canvas": "^1.4.1",
|
||||||
"html2pdf.js": "^0.10.2",
|
"html2pdf.js": "^0.10.2",
|
||||||
"jspdf": "^2.5.2",
|
|
||||||
"jssha": "^3.3.1",
|
"jssha": "^3.3.1",
|
||||||
"plasmo": "0.89.4",
|
"plasmo": "0.89.4",
|
||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
@@ -74,7 +73,6 @@
|
|||||||
},
|
},
|
||||||
"pnpm": {
|
"pnpm": {
|
||||||
"patchedDependencies": {
|
"patchedDependencies": {
|
||||||
"jspdf": "patches/jspdf.patch"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -1,166 +0,0 @@
|
|||||||
import dayjs from "dayjs"
|
|
||||||
import { saveAs } from "file-saver"
|
|
||||||
import html2canvas from "html2canvas"
|
|
||||||
import jsPDF from "jspdf"
|
|
||||||
|
|
||||||
export default class Dom2Pdf {
|
|
||||||
_rootDom = null
|
|
||||||
_title = "codebox-pdf"
|
|
||||||
_a4Width = 595.266
|
|
||||||
_a4Height = 841.89
|
|
||||||
_pageBackground = "rgba(255,255,255)"
|
|
||||||
_hex = [0xff, 0xff, 0xff]
|
|
||||||
|
|
||||||
constructor(rootDom, title, color = [255, 255, 255]) {
|
|
||||||
this._rootDom = rootDom
|
|
||||||
this._title = title
|
|
||||||
this._pageBackground = `rgb(${color[0]},${color[1]},${color[2]})`
|
|
||||||
this._hex = color
|
|
||||||
}
|
|
||||||
|
|
||||||
async savePdf() {
|
|
||||||
const a4Width = this._a4Width
|
|
||||||
const a4Height = this._a4Height
|
|
||||||
const hex = this._hex
|
|
||||||
|
|
||||||
return new Promise(async (resolve, reject) => {
|
|
||||||
try {
|
|
||||||
const canvas = (await this.getCanvas()) as HTMLCanvasElement
|
|
||||||
const pdf = new jsPDF("p", "pt", "a4")
|
|
||||||
let index = 1,
|
|
||||||
canvas1 = document.createElement("canvas"),
|
|
||||||
height
|
|
||||||
let leftHeight = canvas.height
|
|
||||||
|
|
||||||
let a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height)
|
|
||||||
let position = 0
|
|
||||||
let pageData = canvas.toDataURL("image/jpeg", 0.7)
|
|
||||||
pdf.setDisplayMode("fullwidth", "continuous", "FullScreen")
|
|
||||||
|
|
||||||
function createImpl(canvas) {
|
|
||||||
if (leftHeight > 0) {
|
|
||||||
index++
|
|
||||||
let checkCount = 0
|
|
||||||
if (leftHeight > a4HeightRef) {
|
|
||||||
let i = position + a4HeightRef
|
|
||||||
for (i = position + a4HeightRef; i >= position; i--) {
|
|
||||||
let isWrite = true
|
|
||||||
for (let j = 0; j < canvas.width; j++) {
|
|
||||||
let c = canvas.getContext("2d").getImageData(j, i, 1, 1).data
|
|
||||||
if (c[0] !== hex[0] || c[1] !== hex[1] || c[2] !== hex[2]) {
|
|
||||||
isWrite = false
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (isWrite) {
|
|
||||||
checkCount++
|
|
||||||
if (checkCount >= 10) {
|
|
||||||
break
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
checkCount = 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
height =
|
|
||||||
Math.round(i - position) || Math.min(leftHeight, a4HeightRef)
|
|
||||||
if (height <= 0) {
|
|
||||||
height = a4HeightRef
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
height = leftHeight
|
|
||||||
}
|
|
||||||
canvas1.width = canvas.width
|
|
||||||
canvas1.height = height
|
|
||||||
let ctx = canvas1.getContext("2d")
|
|
||||||
ctx.drawImage(
|
|
||||||
canvas,
|
|
||||||
0,
|
|
||||||
position,
|
|
||||||
canvas.width,
|
|
||||||
height,
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
canvas.width,
|
|
||||||
height
|
|
||||||
)
|
|
||||||
if (position !== 0) {
|
|
||||||
pdf.addPage()
|
|
||||||
}
|
|
||||||
pdf.setFillColor(hex[0], hex[1], hex[2])
|
|
||||||
pdf.rect(0, 0, a4Width, a4Height, "F")
|
|
||||||
pdf.addImage(
|
|
||||||
canvas1.toDataURL("image/jpeg", 1.0),
|
|
||||||
"JPEG",
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
a4Width,
|
|
||||||
(a4Width / canvas1.width) * height
|
|
||||||
)
|
|
||||||
leftHeight -= height
|
|
||||||
position += height
|
|
||||||
if (leftHeight > 0) {
|
|
||||||
setTimeout(createImpl, 500, canvas)
|
|
||||||
} else {
|
|
||||||
resolve(pdf)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (leftHeight < a4HeightRef) {
|
|
||||||
pdf.setFillColor(hex[0], hex[1], hex[2])
|
|
||||||
pdf.rect(0, 0, a4Width, a4Height, "F")
|
|
||||||
pdf.addImage(
|
|
||||||
pageData,
|
|
||||||
"JPEG",
|
|
||||||
0,
|
|
||||||
0,
|
|
||||||
a4Width,
|
|
||||||
(a4Width / canvas.width) * leftHeight
|
|
||||||
)
|
|
||||||
resolve(pdf)
|
|
||||||
} else {
|
|
||||||
try {
|
|
||||||
pdf.deletePage(0)
|
|
||||||
setTimeout(createImpl, 500, canvas)
|
|
||||||
} catch (err) {
|
|
||||||
reject(err)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
reject(error)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
async getCanvas() {
|
|
||||||
const canvas = await html2canvas(this._rootDom, {
|
|
||||||
useCORS: true,
|
|
||||||
allowTaint: true,
|
|
||||||
scale: 1,
|
|
||||||
backgroundColor: this._pageBackground
|
|
||||||
})
|
|
||||||
|
|
||||||
return canvas
|
|
||||||
}
|
|
||||||
|
|
||||||
async downloadPdf() {
|
|
||||||
const newPdf = (await this.savePdf()) as jsPDF
|
|
||||||
const title = `${this._title}-${dayjs().format("YYYY-MM-DD HH:mm:ss")}.pdf`
|
|
||||||
newPdf.save(title)
|
|
||||||
}
|
|
||||||
|
|
||||||
async printPdf() {
|
|
||||||
const newPdf = (await this.savePdf()) as jsPDF
|
|
||||||
const pdfBlob = newPdf.output("blob")
|
|
||||||
const pdfUrl = URL.createObjectURL(pdfBlob)
|
|
||||||
window.open(pdfUrl)
|
|
||||||
}
|
|
||||||
|
|
||||||
async downloadImg() {
|
|
||||||
const canvas = (await this.getCanvas()) as HTMLCanvasElement
|
|
||||||
const title = `${this._title}-${dayjs().format("YYYY-MM-DD HH:mm:ss")}.png`
|
|
||||||
canvas.toBlob(function (blob) {
|
|
||||||
saveAs(blob, title)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user