我有一个id为"content"的内容div.在内容div中我有一些图表和一些表格.我想在用户点击下载按钮时将该div下载为pdf.有没有办法使用javascript或jQuery?
我正在尝试构建一个应用程序,我需要将整个div作为图像复制到剪贴板.div可以包含嵌套的div和图像,svgs等.
我已经搜索了很多,但无法找到我的要求的任何答案.
目前,我可以将其转换为图像,并使用以下代码在新选项卡中打开它.但是,它只有在div中有纯文本时才有效.当我添加图像时,它会失败.我只是复制了黑屏.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
<script type="text/javascript">
function copy() {
var c = document.getElementsByClassName('myclass')[0];
html2canvas(c, {
onrendered: function(canvas) {
theCanvas = canvas;
var image = new Image();
image.id = "pic"
image.src = theCanvas.toDataURL();
image.height = c.clientHeight
image.width = c.clientWidth
window.open(image.src, 'Chart')
}
})
}
</script>
<button onclick='copy()'>Copy</button>
<div class="myclass">
Hi There!!!!!!!!
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
这有助于我在新窗口中打开图像.任何方式直接将其复制到剪贴板而不是从新窗口右键单击上下文菜单,并使其全部适用于混合内容.任何帮助,将不胜感激.
编辑:我得到的代码使用img标记在本地服务器上托管它,并使其与svg元素一起使用.但我的应用程序混合了以下标签:
<div>
<div>
some text here
<svg>
<g>...</g>
<g>...</g>
</svg>
<svg> …Run Code Online (Sandbox Code Playgroud)