После получения выбранных абзацев вы можете отправить текст в новое окно как URL-адрес объекта:
window.open(URL.createObjectURL(new Blob([text], {
type: 'text/plain;charset=utf-8'
})))
Демо
Примечание: Переполнение стека запрещает вызов window.open, но вы можете протестировать код самостоятельно в своей любимой среде IDE / веб-браузере.
const paragraphs = [
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
"Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.",
"It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
]
const main = () => {
populateCheckboxes(paragraphs, document.querySelector('.paragraphs'))
document.querySelector('.btn-export').addEventListener('click', handleExport)
}
const handleExport = () => {
const text = [...document.querySelectorAll('.checkbox-wrapper > input[type="checkbox"]')]
.filter(checkbox => checkbox.checked)
.map(checkbox => checkbox.value)
.join('\n\n')
// Initiate file download in a new window
window.open(URL.createObjectURL(new Blob([text], {
type: 'text/plain;charset=utf-8'
})))
}
const populateCheckboxes = (paragraphs, target) => {
paragraphs.forEach(paragraph => {
let checkboxWrapper = document.createElement('div')
let checkbox = document.createElement('input')
let span = document.createElement('span')
checkboxWrapper.classList.add('checkbox-wrapper')
checkbox.setAttribute('type', 'checkbox')
checkbox.value = paragraph
span.textContent = paragraph
checkboxWrapper.appendChild(checkbox)
checkboxWrapper.appendChild(span)
target.appendChild(checkboxWrapper)
})
}
main()
.checkbox-wrapper {
margin-bottom: 1em;
}
.checkbox-wrapper input[type="checkbox"] {
margin-right: 1em;
}
<div class="paragraphs"></div>
<button class="btn-export">Export</button>
Живая демонстрация фильтрации
Это не экспортирует абзацы, но позволяет вам переключать их.
const paragraphs = [
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
"Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.",
"It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
]
const toggleClick = e => {
e.target.parentElement.classList.toggle('expanded')
e.target.parentElement.querySelector('.togglable').classList.toggle('hidden')
}
paragraphs.forEach(paragraph => {
let wrapper = document.createElement('p')
wrapper.classList.add('expander', 'expanded')
let toggler = document.createElement('span')
toggler.classList.add('toggler')
toggler.addEventListener('click', toggleClick)
let content = document.createElement('span')
content.classList.add('togglable')
content.textContent = paragraph
wrapper.appendChild(toggler)
wrapper.appendChild(content)
document.body.appendChild(wrapper)
})
.expander .toggler {
display: inline-block;
width: 1em;
cursor: pointer;
text-align: center;
font-weight: bold;
}
.expander .toggler:before {
content: "+";
}
.expander.expanded .toggler:before {
content: "-";
}
.hidden {
display: none;
}