下载 SVG 和 PNG 格式的插图，Blob 未定义 - Vue.js2 和 Laravel 8

编程问答 2022-04-30

问题描述

我想为我的插图创建一个下载功能，我可以下载 SVG 或 PNG 格式。我正在使用 Blob 下载 SVG 文件，但总是出现错误：

vue.esm.js?a0​​26:628 [Vue 警告]：v-on 处理程序出错： “参考错误：未定义 blob”

和

ReferenceError: blob 未定义 在 VueComponent.downloadSVG (Illustrationgallery.vue?477d:191)

我的屏幕： https://i.stack.imgur.com/GQmi5.png

我的数据库：（为了您的信息，我将插图以SVG格式保存在数据库中 https://i.stack.imgur.com/JTXIT.png

这是我的代码：

<script>

export default {
    data() {
        return {
            items: [],}
    },methods: {
        loadIllustration() {
            const token = this.$store.getters.currentUser.token
            axios.get('/api/illustration',{
                headers: {
                    Authorization: `Bearer ${token}`
                }
            })
            
                .then(response =>{
                    this.items = response.data.illustrations
                    this.categories = response.data.svg_category
                })
        },downloadSVG(evt) {
            for(let i = 0; i <= this.items.length; i++){
                const svgContent = this.items[i].illustration_svg;
                console.log(svgContent)
                    blob = new Blob([svgContent],{
                        type: "image/svg+xml"
                    }),// const url = window.URL.createObjectURL(blob),url = URL.createObjectURL(blob),link = evt.target;
                link.target = "_blank";
                link.download = "Illustration1.svg";
                link.href = url;
            }
           
        },downloadpnG(evt) {
            for(let i = 0; i <= this.items.length; i++){
                const svgContent = this.items[i].illustration_svg;
                // console.log(svgContent)

            }
           
        }
       
    },}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="text-center card-overlay">
                        <div class="download-btn">
                            <button class="btn mr-4 text3" @click="downloadpnG()">
                                <svg xmlns="http://www.w3.org/2000/svg" class="download-icon" width="13" height="13" viewBox="0 0 24 24">
                                    <path id="FontAwsome_download_" data-name="FontAwsome (download)" d="M10.125,0h3.75A1.122,1.122,1,15,1.125V9h4.111a.936.936,.661,1.6l-7.13,7.134a.908.908,1-1.28,0L4.223,10.6A.936.936,4.884,9H9V1.125A1.122,10.125,0ZM24,17.625v5.25A1.122,22.875,24H1.125A1.122,22.875v-5.25A1.122,1.125,16.5H8l2.3,2.3a2.4,2.4,3.4,0L16,16.5h6.877A1.122,24,17.625ZM18.188,21.75a.938.938,0-.937.938A.94.94,18.188,21.75Zm3,0a.938.938,21.188,21.75Z"/>
                                </svg>
                                PNG</button>
                            <button class="btn text3" @click="downloadSVG()">
                                <svg xmlns="http://www.w3.org/2000/svg" class="download-icon" width="13" height="13" viewBox="0 0 24 24">
                                    <path id="FontAwsome_download_" data-name="FontAwsome (download)" d="M10.125,21.75Z"/>
                                </svg>
                                SVG</button>
                        </div>
                    </div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

blobdownloadpngsvgsvgsvgvue.js