shopify如何生成pdf文件并设置图像

Question

我为博客创建了一个自定义部分。我还插入了下面的按钮，按钮名称是“生成的 pdf”。当我点击生成的按钮然后下载 pdf 时，这个 pdf 我想显示我的文章博客图片。

我想以 pdf 格式显示我的博客图片，但我不知道如何实现。所以请帮助我，我将分享我的代码。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
{%- assign feature_blog = section.settings.feature_blog -%}
{%- assign feature_blog_articles = feature_blog.articles -%}

{% schema %}
  {
  "name": "Blog Home Page",
  "settings": [
    {
      "type": "blog",
      "id": "feature_blog",
      "label": "Feature blog"
    },
    {
        "type": "text",
        "id": "section_title",
        "label": "Section Title",
        "default": "Feature Blog"
    }
  ],
  "presets": [
    {
      "name": "Blog Home Page"
    }
  ]
}  
{% endschema %}

{% for article in blog.articles  %} 
  {% for comment in article.comments %}
    <a href="#">{{ comment.author }}</a>
  {% endfor %}
{% endfor %}

<div class="home-page section-blog">
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="section-title">
                    {% if section.settings.section_title !='' %}
                    <h2>{{ section.settings.section_title }}</h2>
                    {% endif %}
                  </div>
                <div class="bloginner-main">
                    {% for article in feature_blog_articles %}
                        <div class="single-product-wrap">
                           <div class="product-image">
                                <div class="blog-item-badge">
                                    <a href="{{ article.url }}
                                    " target="_blank">
                                        {%- assign img_url = article.image.src | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                                        <img class="lazyload"
                                            src="{{ article.image.src | img_url: '2048x'  }}"
                                            data-src="{{ img_url }}"
                                            data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                                            data-aspectratio="{{ article.image.src.aspect_ratio }}"
                                            data-sizes="auto"
                                            alt="{{ image.alt | escape }}">
                                    </a>
                                </div>
                           </div> 
                           <div class="product-content">
                            
                            <h3>{{ article.title }}</h3>
                            <span>{{ article.excerpt }}</span>
                            <div class="price-box">
                              {% for comment in article.comments %}
                                <a href="{{ article.url }}">{{ comment.author }}</a>
                              {% endfor %}
                            </div>
                                
                           </div> 
                           <div class="lg-banner-info">
                                <a class="btn more-product-btn" href="{{ article.url }}">View More</a>
                            </div>
                        </div>
                    {% endfor %}    
                </div>
            </div>
        </div>        
    </div>    
</div>
<button onclick="createPdf()" id="cmd">Generate PDF</button>

<script>

  var ourBlogctive = $('.bloginner-main');
  ourBlogctive.slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3,
    margin: 30,
    prevArrow: '<button type="button" class="slick-prev"> <i class="icon-arrow-left"></i> </button>',
    nextArrow: '<button type="button" class="slick-next"><i class="icon-arrow-right"></i></button>'
  });
  


</script>



<script type="text/javascript">
function createPdf() {
    var doc = new jsPDF();
    var yOffset = 20; // Initial y-offset for text

    {% for article in feature_blog_articles %}
        // Add article title to the PDF
        doc.text("Title: <img src ='{{ article.image.src }}'>", 10, yOffset);
        

        yOffset += 10; // Adjust y-offset for the next line

        // Add a line break
        doc.text("", 10, yOffset);
        yOffset += 10; // Adjust y-offset for the next line
    {% endfor %}

    // Save the PDF
    doc.save('sample-file.pdf');
}
</script>

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Answer 1

要使用 Shopify 博客文章中的图像生成 PDF，您可以使用 JavaScript 提取必要的信息，然后使用 jsPDF 等库来创建 PDF。

以下是如何修改代码以将文章图像包含在生成的 PDF 中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
{%- assign feature_blog = section.settings.feature_blog -%}
{%- assign feature_blog_articles = feature_blog.articles -%}

{% schema %}
  {
  "name": "Blog Home Page",
  "settings": [
    {
      "type": "blog",
      "id": "feature_blog",
      "label": "Feature blog"
    },
    {
        "type": "text",
        "id": "section_title",
        "label": "Section Title",
        "default": "Feature Blog"
    }
  ],
  "presets": [
    {
      "name": "Blog Home Page"
    }
  ]
}  
{% endschema %}

{% for article in blog.articles  %} 
  {% for comment in article.comments %}
    <a href="#">{{ comment.author }}</a>
  {% endfor %}
{% endfor %}

<div class="home-page section-blog">
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="section-title">
                    {% if section.settings.section_title !='' %}
                    <h2>{{ section.settings.section_title }}</h2>
                    {% endif %}
                  </div>
                <div class="bloginner-main">
                    {% for article in feature_blog_articles %}
                        <div class="single-product-wrap">
                           <div class="product-image">
                                <div class="blog-item-badge">
                                    <a href="{{ article.url }}
                                    " target="_blank">
                                        {%- assign img_url = article.image.src | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                                        <img class="lazyload"
                                            src="{{ article.image.src | img_url: '2048x'  }}"
                                            data-src="{{ img_url }}"
                                            data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                                            data-aspectratio="{{ article.image.src.aspect_ratio }}"
                                            data-sizes="auto"
                                            alt="{{ image.alt | escape }}">
                                    </a>
                                </div>
                           </div> 
                           <div class="product-content">
                            
                            <h3>{{ article.title }}</h3>
                            <span>{{ article.excerpt }}</span>
                            <div class="price-box">
                              {% for comment in article.comments %}
                                <a href="{{ article.url }}">{{ comment.author }}</a>
                              {% endfor %}
                            </div>
                                
                           </div> 
                           <div class="lg-banner-info">
                                <a class="btn more-product-btn" href="{{ article.url }}">View More</a>
                            </div>
                        </div>
                    {% endfor %}    
                </div>
            </div>
        </div>        
    </div>    
</div>
<button onclick="createPdf()" id="cmd">Generate PDF</button>

<script>
  // Your slick initialization code here
</script>

<script type="text/javascript">
function createPdf() {
    var doc = new jsPDF();
    var yOffset = 20; // Initial y-offset for text

    {% for article in feature_blog_articles %}
        // Add article title to the PDF
        doc.text("Title: {{ article.title }}", 10, yOffset);
        
        yOffset += 10; // Adjust y-offset for the next line

        // Add article image to the PDF
        var img = new Image();
        img.onload = function() {
            doc.addImage(this, 10, yOffset, 100, 100); // Adjust image dimensions as needed
            doc.save('sample-file.pdf'); // Save the PDF after adding the image
        };
        img.src = "{{ article.image.src }}";

        yOffset += 110; // Adjust y-offset for the next line
    {% endfor %}
}
</script>

此代码迭代 feature_blog_articles 数组中的每篇文章，并使用 jsPDF 将其标题和图像添加到 PDF 中。确保根据需要调整图像尺寸和偏移以适合您的布局。