用php下载一个svg
Posted
技术标签:
【中文标题】用php下载一个svg【英文标题】：Download a svg with php 【发布时间】：2021-11-09 16:31:07 【问题描述】：我想为 svg 创建一个 php 下载。 Rn 我正在创建一个 svg 片段，现在我想将该片段放入下载中，但不知道如何。
有下载部分（download.php）及其从index.php加载代码
$file = include('index.php');
header('Content-Disposition: attachment; filename="segment.svg"');
header('Content-Type: image/svg');
header('Content-Length: ' . strlen($file));
header('Connection: close');
echo $file;
exit();
有index.php
<body>
<div class="container">
<form action="index.php" method="get">
<label for="segments">Segmente</label><br/>
<input type="number" id="segments" name="segment">
<input type="submit" value="Absenden" name="submit">
</form>
<?php
$getSegment = $_GET['segment'];
// I deleted some code here
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" id="svg">
<?php for ($i = 0; $i < 1; $i++): ?>
<?php
$start_angle = $segment_arc * $i;
$end_angle = $segment_arc * ($i + 1);
?>
<path fill="#red" stroke- d="<?php echo $generate_arc($start_angle, $end_angle) ?>" />
<?php endfor ?>
</svg>
</div>
<div class="container">
<button class="btn btn-primary" onclick="location.href='download.php'">Download</button>
</div>
</body>
<?php
echo segment_circle($getSegment);
else if (!isset($getSegment) || empty($getSegment))
echo 'Bitte trag eine Segmentanzahl ein!';
有一张图片在前端的样子
【问题讨论】：
由于 SVG 结构本身已经在 html 中，我会使用一些 javascript 来提取它。这可以通过将 SVG 代码放在<div id="svg-code">...</div> 中来完成，这样您就可以使用 document.getElementById('svg-code').innerHTML 轻松提取它。然后you can return it with this JS technique。但是，如果您确实想要在 PHP 中使用它，那么您必须将 segment 值传递给 download.php?segment=...。不要在download.php 中包含index.php！
我该怎么做？
我在答案中的解决方案对您有帮助吗？如果是，最好验证一下，然后你的问题就可以结束了。
【参考方案1】：
这是我没有 PHP 代码的 JavaScript 解决方案，我在对您问题的评论中快速解释了这一点。
为什么要在 JS 中做呢？
JS 解决方案的优势
没有 HTTP 调用，因此服务器上没有处理。这将节省 CPU 并为最终用户提供更快的速度。
您的页面可能包含多个 SVG 图像，您无需在服务器端处理这种情况。我的 JS 解决方案处理多个 SVG 图像和下载按钮。
顺便说一句，SVG 本身可以直接用 JS 生成，而不是用 PHP。
JS方案的缺点
如果浏览器没有启用 JS，那么它将无法工作。但这可能很少见。您总是会选择 PHP 解决方案。我们会让你自己做。无论如何，我们还没有得到您的 PHP 代码。我也不明白你的 PHP 循环 for ($i = 0; $i < 1; $i++): 这意味着你只做一次，所以循环不是必需的。
JS 解决方案的工作原理
您在 SVG 图像和下载按钮周围添加一些 HTML 标记。如果您的页面中有多个，这会将它们分开。我还添加了data-filename 属性，以便您可以轻松设置不同的文件名。如果未设置该属性，则它会下降为常量中设置的默认值。
JavaScript 代码将在下载按钮上添加一个 click 事件处理程序。当这个被点击触发时，它将执行以下操作：
-
创建一个
<a> 元素。
将 SVG 代码放入 href 属性中。
将download 属性设置为具有好听的文件名。
将此<a> 设为不可见并将其添加到 DOM。
在其上模拟 click 事件以启动下载。
从 DOM 中删除 <a> 元素，因为我们不再需要它了。
代码和工作演示
我在这里创建了一个 Codepen.io：Download a SVG with JS
这是阅读的复制粘贴解决方案。
注意：它不适用于最新版本的 Chrome、Edge（可能是 Safari）上的 *** sn-ps因为出于安全原因，下载在 iframe 中被禁用。
但它可以在您的网站上运行，因为它没有嵌入到 <iframe> 中。
// An SVG file has an XML header which you don't use if the SVG is in the HTML document.
// As we want to generate a file, we'll add it before the <svg> tag to be compliant.
const SVG_XML_HEADER = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>';
// The default SVG filename in case the data-filename attribute isn't set.
const DEFAULT_SVG_FILENAME = 'cake.svg';
// Get all the SVG containers of the page.
let svg_containers = document.querySelectorAll('.svg-container');
// For each SVG container, we'll bind the click event to the button to download the SVG.
svg_containers.forEach(function (svg_container, i)
let svg_image = svg_container.querySelector('.svg-image');
// Let's get an optional filename from the data-filename attribute.
let svg_filename = svg_image.getAttribute('data-filename') || DEFAULT_SVG_FILENAME;
// The SVG code is the XML header and the trimmed inner HTML of the <div class="svg-image">.
let svg_code = SVG_XML_HEADER + "\n" + svg_image.innerHTML.trim();
// Now we want to bind the click event to the button so that it can download the SVG code above.
// First let's get the <button>.
let download_button = svg_container.querySelector('button');
// Add the "click" handler on it.
download_button.addEventListener('click', function (event)
// To do the "download" we need to do create a <a> element and click on it:
// Create the <a> element.
var a = document.createElement('a');
// Set it's href to have the SVG content directly in the URL.
a.setAttribute('href', 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg_code));
// Set the filename for the "save as" dialog box.
a.setAttribute('download', svg_filename);
// Don't display this link in the HTML page.
a.style.display = 'none';
// Put it in the HTML page so that we can click on it.
document.body.appendChild(a);
// This click will generate the download.
a.click();
// Remove the created link from the HTML page.
document.body.removeChild(a);
);
);html, body
margin: 0;
padding: 0;
.grid
display: flex;
flex-wrap: wrap;
.svg-container
text-align: center;
margin: 1em;
padding: 1em;
border: 1px solid silver;
<div class="grid">
<div class="svg-container">
<div class="svg-image" data-filename="charkle_cake.svg">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" id="svg">
<path d="M100,100 h-90 a90,90 0 1,0 90,-90 z"
fill="gray" stroke="black" stroke- />
</svg>
</div>
<button class="btn btn-primary">Download</button>
</div>
<div class="svg-container">
<div class="svg-image" data-filename="strawberry_cake.svg">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" id="svg">
<path d="M100,100 h-90 a90,90 0 1,0 90,-90 z"
fill="#fee" stroke="red" stroke-
transform="rotate(225, 100, 100)" />
</svg>
</div>
<button class="btn btn-primary">Download</button>
</div>
<div class="svg-container">
<div class="svg-image">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" id="svg">
<path d="M100,100 h-90 a90,90 0 1,0 90,-90 z"
fill="#efe" stroke="green" stroke-
transform="rotate(135, 100, 100)" />
</svg>
</div>
<button class="btn btn-primary">Download</button>
</div>
</div>【讨论】：
以上是关于用php下载一个svg的主要内容，如果未能解决你的问题，请参考以下文章