如何在Django模板中将变量内容复制到剪贴板

Django传递到模板的变量会在服务端渲染为静态字符串，你只需要配合前端JS的剪贴板API即可实现复制功能，无需额外后端接口。

通用实现示例（点击按钮复制） #

<!-- 存储Django渲染的变量内容，设置为隐藏不影响页面展示 -->
<div style="display: none;" id="stack-val">{{ stack }}</div>
<div style="display: none;" id="text-val">{{ text }}</div>

<!-- 自定义复制触发按钮 -->
<button id="copy-stack">复制stack参数内容</button>
<button id="copy-text">复制text参数内容</button>

<script>
// 封装通用复制方法
function copyContent(targetStr) {
  // 优先用新版浏览器剪贴板API
  navigator.clipboard.writeText(targetStr)
    .then(() => {
      alert("内容已复制到剪贴板")
    })
    .catch(() => {
      // 旧浏览器降级兼容方案
      const tempInput = document.createElement("textarea")
      tempInput.value = targetStr
      document.body.appendChild(tempInput)
      tempInput.select()
      document.execCommand("copy")
      document.body.removeChild(tempInput)
      alert("内容已复制到剪贴板")
    })
}

// 绑定按钮点击事件
document.getElementById("copy-stack").addEventListener("click", () => {
  const stackContent = document.getElementById("stack-val").textContent
  copyContent(stackContent)
})

document.getElementById("copy-text").addEventListener("click", () => {
  const textContent = document.getElementById("text-val").textContent
  copyContent(textContent)
})
</script>

注意事项 #

• 如果你的变量包含HTML标签、引号等特殊字符，Django默认会自动转义输出，如果你需要复制原始未转义的内容，可以用{{ stack|safe }}渲染，注意如果变量内容来自用户输入，使用safe过滤器前必须做好内容安全校验，避免XSS风险。
• 如果你不想通过隐藏DOM存变量，也可以直接把变量注入JS变量，需要搭配escapejs过滤器避免特殊字符破坏JS语法：

  const stackContent = "{{ stack|escapejs }}"
  const textContent = "{{ text|escapejs }}"
  

• 如果需要页面加载完成后自动复制内容，只需要在DOMContentLoaded事件回调里调用copyContent方法即可。

内容的提问来源于stack exchange，提问作者jak dev