1.需求：
- 利用markdown插件，将生成的html带样式保存成文档
2.代码
// 获取编辑框的 html
handleSave(): void {
const renderContent = (this.$refs.editor as any).d_render
// 处理得到的<html> 标签
const htmlElement = document.createElement('html')
htmlElement.setAttribute('lang', 'zh-CN')
const headElement = document.createElement('head')
const bodyElement = document.createElement('body')
const metaElement = document.createElement('meta')
metaElement.setAttribute('charset', 'utf-8')
headElement.appendChild(metaElement)
const styles = this.addStyle()
headElement.appendChild(styles)
bodyElement.innerHTML = renderContent
htmlElement.appendChild(headElement)
htmlElement.appendChild(bodyElement)
const contents = htmlElement.outerHTML // 从html对象取出字符串
this.download('hello.html', contents) // 下载
console.log(htmlElement, contents)
}
// 生成要下载的样式
addStyle() {
const style = document.createElement('style')
style.type = 'text/css'
try {
style.appendChild(
document.createTextNode(
'.hljs-center{text-align: center;}.hljs-left{text-align:left}.hljs-right{text-align:right} table { border-spacing: 0;border-collapse: collapse;display: inline-block;overflow: auto;} table tr { background-color: #fff;border-top: 1px solid #c6cbd1} table td, table th { padding: 6px 13px; border: 1px solid #dfe2e5;}'
)
)
} catch (ex) {
// style.styleSheet.cssText = 'body{background-color:red}' //针对IE
}
return style
}
// 利用a标签下载文档
download(filename: any, content: string) {
const element = document.createElement('a')
// encodeURIComponent() 函数可把字符串作为 URI 组件进行编码
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content))
element.setAttribute('download', filename)
element.style.display = 'none'
document.body.appendChild(element)
element.click()
document.body.removeChild(element)
}
710
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
